元素向右浮动而不是向左浮动答案

【问题标题】：Element floating right instead of left with css元素向右浮动而不是向左浮动
【发布时间】：2014-04-16 10:08:30
【问题描述】：

我试图让这些元素朝着正确的方向浮动。 Box1、Box2 向左浮动，而 Box3 向右浮动。然后在下面，我试图让 homeBlog 在 Box1 下向左对齐，第 2 列在其右侧，而 column3 在 box3 下方浮动。我的问题是 homeBlog 应该向左浮动并在 Box1 下对齐，但是它在 box3 下浮动，并且 column2 和 column3 完全不正常。我在这里做错了什么？

见下面的代码：

.box1{ width:32.6%; 
height:250px;  
float: left; 
margin-right:1.2%;  
border-radius:10px; 
border:1px solid #CCCCCC; 
padding-right:5px; 
padding-top:5px;} 

.box2{padding:3px; 
width:31%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:left; } 

.box3{ padding:0px; 
width:32%; 
height:250px;   
border-radius:10px; 
border:1px solid #CCCCCC; 
float:right; }

.slide { margin-left: auto; 
margin-right: auto; 
margin-top: 0; 
width:950px;}



.column2{width:300px; 
height:auto; 
margin-bottom:5px; 
float:left; 
margin-top:5px;}

.column3{width:300px; 
height:auto; 
margin-bottom:5px; 
float:right; 
margin-top:5px;}

.homeBlog{width:300px; 
height:auto; 
margin-bottom:5px; 
margin-top:5px; 
margin-right:15px; 
float:left; 
background:#CCCCCC; 
height:300px;}

.banner{width:950px; 
height:300px; 
background:#000000; 
margin-bottom:5px;}

.newRow{ width:950px; 
margin-left:auto; 
margin-right:auto;}



<body>
<div class="slide">

<div class="banner"></div>
<div class="box1" style="text-align: center;"><span style="font-family: 'arial black', 'avant garde'; font-size: x-large; color: #993300;"><strong>Fees and Promotions</strong></span></div>
<div class="box2"></div>
<div class="box3"></div></div>

<div class="newRow">
<div class="homeBlog"><strong>News and Updates</strong></div>

<div class="column2">
<p style="text-align: left;"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Comments</strong></span></p>
<span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>  <span style="font-family: arial, helvetica, sans-serif;"> <a href=""><img class="alignnone size-full wp-image-1199" alt="lions" src="" width="280" height="213" /></a></span>

</div>

<div class="column3"><span style="font-size: large; color: #800000; font-family: arial, helvetica, sans-serif;"><strong>Quick Contact</strong></span> <span style="font-family: arial, helvetica, sans-serif;">[contact-form-7 id="394" title="Quick Contact"]</span></div>
</div>
</body>

【问题讨论】：

标签： html css css-float

【解决方案1】：

这可能是需要的：

<div style="clear:both"/>

这是你想要的吗？

http://jsbin.com/yegesume/1/edit

【讨论】：

【解决方案2】：

将clear: both; 添加到 .homeBlog。我怀疑它在尝试向左浮动时卡在 .box2 上。

【讨论】：

是的，它确实卡住了，只是意识到 box3 与其他的高度不同，所以它卡在了 box 2 上。干杯伙伴！