2つのDivsを互いに隣り合わせにするにはどうすればいいですか？

Question

2つのdivをお互いに整列させる助けが必要です.1つは2枚の写真を含み、もう1つはビデオです。

HTML

 <img src="example3.png" alt="CopeLogo" height="200" width="200" class="exlogo" > 
    </div> 
</div> 

CSS

#pics{ 
text-align: center; 
background-color: #194b6f; 
height: 200px; 
width: 500px; 
float: left; 
border-radius: 5px; 
margin-left: 50px; 
border: 2px dashed black;} 

#vid{ 
text-align: center; 
background-color: #194b6f; 
height: 490px; 
width: 660px; 
float: right; 
border-radius: 5px; 
border: 2px dashed black; 
margin-right: 50px;} 

Answer 1

私はあなたの意見を聞いていますが、あなたの質問にもっと明確になるように作業コードを追加してください。

あなたが実際にこれを行うことができます。

HTML

<div class="header"> 
    <div class="pic"> 
    <img src="http://placehold.it/150x150" alt=""> 
    <img src="http://placehold.it/150x150" alt=""> 
    </div> 
    <div class="vid"> 
    <img src="http://placehold.it/400x150" alt=""> 
    </div> 
</div> 

CSS：それの

.header { 
    display: inline-block; 
    width: 100%; 
    border: 1px solid #ccc; 
} 
.vid { 
    float: right; 
} 
.pic { 
    float: left; 
} 

ワーキングfiddle

Answer 2

float両方の要素leftし、それに応じてそこ幅を調整します。

Answer 3

両方ともfloat:left;を使用してください。また、floatを使用しない場合は、両方ともdisplay:inline-block;を使用することもできます。

Answer 4

だと思い、このように：使用divをグループに各エンティティをそのあなたはfloat:leftになります。

2つのイメージを整列させたいので、それぞれをdivに配置し、それらのdivを左に浮動させます。

2つの画像を含むボックスを動画を含むボックスに揃えたいとします。それぞれ左に浮かべてください。

float:left（または右側）を使用すると、浮動小数点型DIVはHTMLの「フロー」から削除されるため、高さがゼロになります。したがって、浮動DIV（またはその他の要素）を含むDIVの高さはゼロです。良くない。これを修正するには、親divにclearfixハックを適用します。ここで

は、より良い説明である（それはフロートをクリアするためにさまざまな方法を用いているが - の両方の方法がうまく動作）：Customising Insightly HTML contact form (aligned, spaced fields)

/* CSS: */ 
 
body{min-width:650px;min-height:650px;} 
 
#pics{float:left;border-radius:5px;XXXmargin-left:50px;border:2px dashed black;} 
 
#picLeft {float:left;height:200px;width:200px;} 
 
#picRight{float:left;height:200px;width:200px;} 
 
#vid{float:left;height:200px;width:200px;border-radius: 5px;border:2px dashed black;} 
 

 
.clearfix:after{content:"";clear:both;display:block;}

<!-- HTML: --> 
 
<div id="container" class="clearfix"> 
 
    <div id="pics" class="clearfix"> 
 
    <div id="picLeft"> 
 
     <img src="http://placekitten.com/200/200" alt="MyLogo" height="200" width="200" class="mainlogo"> 
 
    </div> 
 
    <div id="picRight"> 
 
     <img src="http://placekitten.com/195/195" alt="CopeLogo" height="200" width="200" class="exlogo" > 
 
    </div> 
 
    </div> 
 
    <div id="vid"> 
 
    <iframe src="https://www.youtube.com/watch?v=8E8xMcXmI9E" width="195"></iframe> 
 
    </div> 
 
</div>

その他の参考資料：

CSS-Tricks: Clearfix hack

Another example

Ahmed Alaaの答えも良いヒントがあります：display:inline-blockも有用である - 1