浮動內容的css問題

我需要向上移動第一列下方的第四列。有沒有可能在CSS中做到這一點？浮動內容的css問題

<body> 
    <div class="fleft">1 Lorem ipsum dolor sit amet</div> 
    <div class="fleft">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 
    <div class="fleft">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
    <div class="fleft">4 Lorem ipsum dolor sit amet, consectetur.</div> 
    <div class="fleft">5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
</body>

CSS

body { width:600px;} 
.fleft{ float:left; width:200px;}

請參考小提琴

http://jsfiddle.net/9xbGC/

來源

2012-07-13 designersvsoft

小提琴可以去。如果列的量是已知的模板被解析之前，你可以把3個欄目，以適應項目爲未來的孩子 – worenga 2012-07-13 12:00:03

提供您的問題某事爲好。但你仍然可以拿出有些欄目比其他欄目高得多。所以砌體可能仍然是最好的解決方案。 – 2012-07-13 12:10:42

鑑於你原來的結構 - 沒有沒有（與唯一的CSS和不髒黑客）。第四列必須服從第三個的高度。

也許這個jQuery插件可以幫助你：

http://masonry.desandro.com/

來源

2012-07-13 12:01:05 Christoph

只有這樣，你可以做純CSS是有3列，並在他們之間平分你的內容。

來源

2012-07-13 12:02:52

，你可以做到這一點使用位置絕對和設置頂部和左側的每個，但你應該這樣做使用JavaScript，如果你不知道的每個

高度，或者你可以使用jQuery插件：http://www.wookmark.com/jquery-plugin

來源

2012-07-13 12:03:33 jagm

不，只有你可以依靠第一個div的特定高度。

#div4{ 
    position: absolute; 
    margin-top: 20px; 
}

來源

2012-07-13 12:05:25 32bitfloat

不與浮動，因爲浮動只調整元素的流動，而不是它們的順序。你可以去絕對/相對定位，javasscript。

來源

2012-07-13 12:09:59 worenga

指定div的寬度，以便第四個div適合第一個和第三個div，然後當您將第四個柱子浮起時，它應該坐在右側。

編輯：您還可以使用Twitter Bootstrap附帶的真棒網格系統，它非常有用，可以解決大量佈局問題。 http://twitter.github.com/bootstrap/

來源

2012-07-13 12:11:03

浮動內容的css問題

回答

相關問題