動態列/行

想知道 - 沒有人知道任何好的文章解釋CSS技術，允許一個類的多個實例向下流動相對於它上面的項目的頁面。沒有很好地解釋它。動態列/行

Veerle'Pierter's在本頁做到了這一點：http://veerle.duoh.com/belgiangraphicdesign儘管我不確定我想要使用像她這樣的技術，需要通過她的EE安裝輸入每個元素的高度。

我對自己想要達到的目標做了一點小小的描述; enter image description here

關鍵是我需要一個強大的技術來做到這一點。標記可能如此簡單的事物;

<div class="box"> 
    Number 1 
</div> 
<div class="box"> 
    Number 2 
</div> 
<div class="box"> 
    Number 3 
</div> 
<div class="box"> 
    Number 4 
</div> 
<div class="box"> 
    Number 5 
</div> 
...

會愛上正確方向的指針。

來源

2010-05-24 Fuego DeBassi

你最終解決了你的問題嗎？ – jackocnr 2010-08-10 16:31:39

她沒有設置那些盒子的高度。

Jquery動態地定位每個盒子，據我所知，這是通過您在帖子中描述的標記實現該效果的唯一方法。

如果您不想使用JavaScript解決方案，唯一的方法是使用包裝器列，但這會顯着改變您的標記。

<div class="container"> 
    <div class="box">number 1</div> 
    <div class="box">number 2</div> 
    <div class="box">number 3</div> 
</div> 
<div class="container"> 
    <div class="box">number 4</div> 
    <div class="box">number 5</div> 
    <div class="box">number 6</div> 
</div> 
<div class="container"> 
    <div class="box">number 7</div> 
    <div class="box">number 8</div> 
    <div class="box">number 9</div> 
</div>

來源

2010-05-25 03:36:32

在你的標記中，每個。容器將是一個'列'或'行'？ – Braxo 2010-05-25 12:49:30

列。隨着一排，除非你在每個盒子上設置一個一致的高度，否則你會在盒子底部和下一行之間看到一個間隙。對於一列，這些框不會被垂直約束，因此您將獲得您正在尋找的視覺效果。當然，這一切都取決於您對標記的順序有多少迴旋餘地。如果你的目的是讓內容從左到右閱讀，那麼這個標記在語義上就沒有聲音。如果內容可以讀取的順序無關緊要，那麼這個解決方案應該可以正常工作。 – 2010-05-25 21:07:01

她實現了絕對定位盒子。

但是你可以用非常簡單的css來實現它，假設你可以控制項目出現的順序。
你必須將它們按列分組（不像往常一樣在行中），但它像一個魅力。

使用HTML這樣的：

<span class="column"> 
    <div class="box">number 1<br />with two lines</div> 
    <div class="box">number 4</div> 
    <div class="box">number 7<br />with two lines</div> 
</span> 
<span class="column"> 
    <div class="box">number 2</div> 
    <div class="box">number 5<br />with two lines<br />or even three<br />or four!</div> 
    <div class="box">number 8</div> 
</span> 
<span class="column"> 
    <div class="box">number 3</div> 
    <div class="box">number 6</div> 
    <div class="box">number 9</div> 
</span>

和CSS這樣的：

.column { 
    clear: left; 
    width: 25%; 
    display: inline-block; 
    vertical-align: top; 
} 
.box { 
    border: solid 1px blue; 
}

測試它JSFiddle.net。
對列使用span，因爲對於自然爲塊元素的元素，IE7不接受display: inline-block;。（Meh。）

來源

2010-05-25 12:44:22 ANeves

正如其他人指出的那樣，只使用CSS，您可以將這些框分組成列。不幸的是，如果你的內容是動態的，並且你不知道所有框的高度（你的列可能會有不同的長度）。如果你想計算盒子的高度以便很好地排列盒子，你將不得不使用Javascript。使用Javascript肯定沒有錯 - 它是這份工作的正確工具！

至於實施，邏輯會像這樣：首先添加前4個框，每個框的頂部一個。然後使用Javascript的clientHeight屬性跟蹤每列的總高度，併爲每個想要添加的新盒子記錄;只需使用appendChild（）將其附加到最短列的末尾即可。

如果您決定使用jQuery，我可以推薦一個名爲jQuery Masonry的插件。

來源

2010-06-07 12:36:02 jackocnr

回答

相關問題