为什么我的元素只在浮动权（不剩）

如果我设置firstGroup到float: right，我与右边的第一组两列达到预期效果。但是，如果我将它设置为float: left，我只是得到了以下要素坚持到第一个底部！为什么我的元素只在浮动权（不剩）

注：我需要支持回IE7一路，所以没有column-count。

这是我的页面的显着简化版本（我只留下相关的块元素，只给出几样物品）：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Take</title> 
    <style type="text/css"> 
     .group 
     { 
      margin-bottom: 20px; 
      width: 50%; 
      min-width: 530px; 
     } 

     .group > .group 
     { 
      margin-bottom: 0px; 
     } 

     .group > .label 
     { 
      display: block; 
      width: 510px; 
      padding: 5px; 
      border: 1px solid black; 
     } 

     .firstGroup 
     { 
      float: left; 
     } 

     .item 
     { 
      display: block; 
      width: 510px; 
      padding: 5px; 
      border: 1px solid black; 
     } 

     .item .label 
     { 
      display: block; 
      float: left; 
      width: 200px; 
      height: 20px; 
     } 

     .header textarea 
     { 
      display: block; 
     } 

     .header 
     { 
      margin-bottom: 20px; 
     } 
    </style> 
</head> 
<body> 
    <div class="page"> 
     <div class="main"> 
      <h2>Title</h2> 
      <form> 
       <div class="header"> 
        Notes : 
        <textarea name="Notes"></textarea> 
       </div> 
       <div class="group firstGroup"> 
        <span class="label" style="background-color: #005588; color: white;">List 1</span> 
        <div class="group"> 
         <span class="label" style="background-color: #999999; color: #000000;">Sub List 1</span> 

         <span class="item" style="background-color: #339933; color: #000000;"> 
          <span class="label">Item 1</span> 
          <span class="options"> 
           <span class="option"><input name="item[0].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
           <span class="option"><input name="item[0].itemResultID" type="radio" value="1" />Yes</span> 
           <span class="option"><input name="item[0].itemResultID" type="radio" value="2" />No</span> 
          </span> 
          <span class="notes"><input type="text" name="item[0].TestNotes" value="" /></span> 
         </span> 

         <span class="item" style="background-color: #339933; color: #000000;"> 
          <span class="label">Item 2</span> 
          <span class="options"> 
           <span class="option"><input name="item[1].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
           <span class="option"><input name="item[1].itemResultID" type="radio" value="1" />Yes</span> 
           <span class="option"><input name="item[1].itemResultID" type="radio" value="2" />No</span> 
          </span> 
          <span class="notes"><input type="text" name="item[1].TestNotes" value="" /></span> 
         </span> 

         <span class="item" style="background-color: #339933; color: #000000;"> 
          <span class="label">Item 3</span> 
          <span class="options"> 
           <span class="option"><input name="item[2].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
           <span class="option"><input name="item[2].itemResultID" type="radio" value="1" />Yes</span> 
           <span class="option"><input name="item[2].itemResultID" type="radio" value="2" />No</span> 
          </span> 
          <span class="notes"><input type="text" name="item[2].TestNotes" value="" /></span> 
         </span> 
        </div> 
        <div class="group"> 
         <span class="label" style="background-color: #999999; color: #000000;">Sub List 2</span> 

         <span class="item" style="background-color: yellow; color: #000000;"> 
          <span class="label">Item 1</span> 
          <span class="options"> 
           <span class="option"><input name="item[3].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
           <span class="option"><input name="item[3].itemResultID" type="radio" value="1" />Yes</span> 
           <span class="option"><input name="item[3].itemResultID" type="radio" value="2" />No</span> 
          </span> 
          <span class="notes"><input type="text" name="item[3].TestNotes" value="" /></span> 
         </span> 
        </div> 
       </div> 
       <div class="group"> 
        <span class="label" style="background-color: red; color: white;">List 2</span> 

        <span class="item" style="background-color: #339933; color: #000000;"> 
         <span class="label">Item 1</span> 
         <span class="options"> 
          <span class="option"><input name="item[4].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
          <span class="option"><input name="item[4].itemResultID" type="radio" value="1" />Yes</span> 
          <span class="option"><input name="item[4].itemResultID" type="radio" value="2" />No</span> 
         </span> 
         <span class="notes"><input type="text" name="item[4].TestNotes" value="" /></span> 
        </span> 

        <span class="item" style="background-color: #339933; color: #000000;"> 
         <span class="label">Item 2</span> 
         <span class="options"> 
          <span class="option"><input name="item[5].itemResultID" type="radio" value="0" checked="checked" />N/A</span> 
          <span class="option"><input name="item[5].itemResultID" type="radio" value="1" />Yes</span> 
          <span class="option"><input name="item[5].itemResultID" type="radio" value="2" />No</span> 
         </span> 
         <span class="notes"><input type="text" name="item[5].TestNotes" value="" /></span> 
        </span> 
       </div> 
       <input type="submit" value="Submit" /> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

我在FF 8和IE 9测试，两者都有相同的行为。

来源

2012-12-03 just.another.programmer

可以canfigure这对jsfiddler？ – Sampath

http://jsfiddle.net/4VCqs/ –

当你浴液：正确的话就是你所期待的，为什么你把它改为留？ – Sampath

你应该浮动.group并不仅仅是.firstGroup

来源

2012-12-20 22:53:51 ignacioricci

解决了这个问题......但并不能解释原因。这似乎没有遵循文档。 –

这是基本的CSS。像div这样的块元素在正常流程中保持一个在另一个之下。浮动允许我们通过在同一行上有多个块元素来打破这种模式。但为了达到预期的效果，它们应该都是漂浮的。不这样做会产生意外的行为。在某些情况下，这个规则是弯曲的，例如在文本周围缠绕图像，这种行为证明是有帮助的。 – ignacioricci

为什么我的元素只在浮动权（不剩）

回答

相关问题