Question

需要帮助让两个div彼此对齐，一个包含2张图片，另一个包含视频。

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

只需使用float:left;，如果您不想使用display:inline-block;，也可以同时使用float。

Answer 2

我明白你的观点，但请在你的问题中添加你的工作代码以便更清楚。

你实际上可以这样做：

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 3

以这种方式思考：使用DIV将您想要的每个实体分组为float:left。

你想对齐两个图像，所以将每个图像放入一个div中，并将这些div向左浮动。

您希望将包含两个图像的框与包含视频的框对齐。浮动每一个人。

使用float:left（或右）时，浮动的DIV将从HTML＆＃34; flow＆＃34;中移除。因此高度为零。因此，包含浮动DIV（或其他元素）的DIV具有零高度。不好。要解决此问题，请将clearfix hack应用于父div。

这是一个更好的解释（虽然它使用不同的方法来清除浮点数 - 两种方法都可以正常工作）： Customising Insightly HTML contact form (aligned, spaced fields)

＆＃13;

/*  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;}

＆＃13;

<!--  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>

＆＃13;

其他参考文献：

CSS-Tricks: Clearfix hack

Another example

Ahmed Alaa的答案也有一个很好的提示：display:inline-block也很有用 - +1

Answer 4

float两个元素left并相应地调整宽度。

如何在彼此旁边内联两个div？

4 个答案: