Question

我试图让这些元素朝着正确的方向浮动。 Box3，Box2向左浮动而Box3向右浮动。然后在下面，我试图让homeBlog浮动在Box1下面的一个对齐，右边的第2列和第3列在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>

Answer 1

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

Answer 2

可能需要这样做：

<div style="clear:both"/>

这是你想要的吗？

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

元素向右浮动而不是用css左移

2 个答案: