複数の画像を調整するカスタム

Question

私はCSSが初めてで、私は学校プロジェクトに取り組んでいます。私は画像の整列に問題があるようです。 これは私がPhotoshopで行ったレイアウトです。私がやっていることは、画像をトリミングしてHTMLファイルにインポートすることです。私は今、2枚の画像をインポートしていると私はトラブルにそれらのうちの2つを合わせるを持っています：

これは私のHTMLコードです：

<a href=""><img src="Zotac_1.png" class="gpu"></a> 
    <a href=""><img src="webcam.png" class="webcam"></a> 

と、これは私のCSSです：

.gpu { 
margin-top: 10px; 
float: left; 
} 

.webcam { 
float: left; 
margin: 10px 0px 0px 10px; 
} 

長いポストに申し訳ありません

Answer 1

これはCSS Property Clear。クラスの例は次のようになります。

.gpu { 
    margin-top: 10px; 
    float: left; 
    height:150px; 
    width:150px; 
    clear:both; 
} 

clear見hereを使用して、例えば、このJSFiddleを参照してくださいする方法の良いアイデアを得るために。あなたはおそらくコンテナを使用したいしようとしているあなたの質問内の画像を見ると、追加の例と

編集

。これは、divにいくつかの画像をラップし、次に画像とdivの両方を浮動させることによって行うことができます。これを見てくださいJSFiddle Example

JSFiddleのコードは、次のような出力を生成します。

注：1920x1080モニターを使用していない場合、あなたはそれが所望の出力

編集2

のように見えるようにJSFiddleの実行中の領域のサイズを変更する必要がある場合があります

あなたのJSFiddleを修正するには、すべてのdivをフローティングにして、左側に余白を付けて区切ります。これは私が使用したコードです。

.imgs, .leftImgs, .centerImgs, .rightImgs { 
    float: left; 
    margin-left: 10px; 
} 

注：あなたがあなたの.imgsクラスを配置した場合だけではなく、次のコードを使用します。

.leftImgs, .centerImgs, .rightImgs { 
    float: left; 
    margin-left: 10px; 
}