css可變長度列延伸得太遠 - clear：float issue？

不是前端UI，但有一個（可能）非常容易的問題來修復和更新這個問題css variable length columns extending too far。我有兩個浮動元素顯示在這個屏幕截圖和小提琴http://jsfiddle.net/trestles/U7mYT/。一個是左移，另一個（索引 - 右 - 內容）右移。浮動的右div有兩列內容。第二列的時間要長得多，但不會擴展箱子以推下容器。索引權的內容是posistion：relative。css可變長度列延伸得太遠 - clear：float issue？

我可以看到，如果我擴展中間列，它會擴展索引右鍵內容，但右手欄不會這樣做。

THX

來源

2011-12-21 timpone

你知道你的兩個鏈接都轉到同一頁面，對不對？ – 2011-12-21 15:36:10

對不起，電話 – timpone 2011-12-21 15:42:28

您使用絕對定位爲第二列，這需要它流動的 - 它不會影響父div的高度了。

更好的選擇是漂浮在右擋都colums，並添加一個明確的元素：

http://jsfiddle.net/U7mYT/3/

<div id='content'> 
    <div id='featured-lists'> 
    <div class='index-left-list'> 
     <div class='index-box'> 
     <div class="cluster-box"></div> 
     </div> 
    </div> 
    <div class='index-right-content'> 
     <div class='index-box'></div> 
     <div class='index-box right'> 
     <div class="cluster-box"> </div> 
     </div> 
     <div class="clear"></div> <!-- added --> 
    </div> 
    <div style="clear:both;height:1px;overflow:none;"></div> 
    </div> 
    <div id='footer'> here is footer </div> 
</div>

最後一列的CSS：

.index-box { 
    width: 300px; 
    float:left; 
} 

.right { 
    float:left; 
} 
.clear { 
    clear:both; 
}

來源

2011-12-21 15:40:40 ptriek

好吧 - 這看起來像它的作品。 thx太多了！這是多重浮動處理這個最好的方法？ – timpone 2011-12-21 15:57:04

在我看來，是的。我從來不使用abs/rel定位佈局，我只在需要元素彼此疊加時才使用它。 – ptriek 2011-12-21 16:10:31

你可以加：

.right {

display：inline;身高：yourvalue; }

並刪除該位置。

這應該工作;

來源

2011-12-21 15:42:17 Toping

儘管高度不詳，但如果有必要，應擴展 – timpone 2011-12-21 15:42:55

好吧，它在這裏工作，沒有高度...嘗試它 – Toping 2011-12-21 15:43:53

而不是使用絕對定位，你應該浮動所有的列。你可以整理一下HTML稍微還有：

<div class="wrap"> 
    <div class="left"> 
     Left column 
    </div> 
    <div class="right"> 
     Right column 
     <div class="left"> 
      With two columns 
     </div> 
     <div class="right"> 
      In it 
     </div> 
    </div> 
</div>

而是使用清除浮動你可以使用一個簡單的clearfix像溢出聯合國需要的HTML元素：隱藏;在容器而不是上：

div.wrap { 
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden; /* clearfix */ 
} 

    div.wrap div.left { 
     width: 480px; 
     float: left; 
     overflow: hidden; /* clearfix */ 
    } 

    div.wrap div.right { 
     width: 480px; 
     float: right; 
     overflow: hidden; /* clearfix */ 
    } 

     div.wrap div.left div.left, 
     div.wrap div.right div.left, 
     div.wrap div.left div.right, 
     div.wrap div.right div.right { 
      width: 240px; 
     }

我肯定會盡力來命名我的班的東西有點少設計相關，以及（如原發性和繼發性，而不是左，右）。

來源

2011-12-21 15:49:32 powerbuoy

css可變長度列延伸得太遠 - clear：float issue？

回答

相關問題