爲什麼我的元素只在浮動權（不剩）

如果我設置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

爲什麼我的元素只在浮動權（不剩）

回答

相關問題