垂直堆疊在不同的列CSS只有

我有div相同的寬度，但不同的高度，他們應該顯示在列中，浮動到他們上面的下一個div。垂直堆疊在不同的列CSS只有

Is there any way to handle that without placing them via Javascript?

一個想法是對列的div和的div放到他們，但有沒有增加更多的標記另一種可能性？

在此先感謝！

來源

2013-07-13 kaljak

我不知道你是否可以用CSS來做到這一點。但你可以通過js實現這一點（我知道你不想使用它）：http://masonry.desandro.com/ –

@kaljak：你需要爲每個列添加一個包裝div，然後包含子div的可變高度。 –

@MohitPandey OP已經想到了這個解決方案;他不想要額外的標記。 – Mohamad

另一個可能的解決方案是使用CSS列。列屬性應用於容器

body { 
    -moz-column-width: 100px; 
    -webkit-column-width: 100px; 
    column-width: 100px; 
}

然後在div的使用display: inline-block;。

例子：http://jsfiddle.net/tdwZe/

參見https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

注：CSS列不支持IE年紀比IE10（http://caniuse.com/#feat=multicolumn）。

來源

2013-07-13 17:02:11

非常有趣的答案，它工作，不處理年齡大，然後IE10是一個很大的缺點..謝謝但:) – kaljak

是的。你可以使用絕對位置。假設你知道你的div的高度。此解決方案對於動態內容不適用。

您需要爲每個div分配一個類，然後提供相關的CSS來正確定位它。

div1 { 
    height: 100; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

div2 { 
    height: 100; 
    position: absolute; 
    left: 0; 
    top: 100px; /* The height of the div above it */ 
}

等...

如果你有動態內容，它可能是更好的使用JavaScript，特別是jQuery Masonry Plugin。

另一種方法是像你提到的那樣將你的div堆積在一欄中。

有關更多詳細信息，請參見this question。

來源

2013-07-13 16:30:34 Mohamad

那麼div的高度可變（內容不同），所以不是可能吧？（你需要js？） – kaljak

我更新了我的答案。看到這個問題：http://stackoverflow.com/questions/16907949/floating-div-extra-space-fillup/16907969#16907969 – Mohamad

感謝您指向我的插件！ – kaljak

可以，但你需要

演示把那些盒子在父盒子http://jsbin.com/ozazat/3/edit

例如3列，各持儘可能多的箱子，你想：

div div { 
    background-color:red; 
    margin:10px; 
} 
.col1, .col2, .col3 { 
    width:100px; 
    float:left; 
    border:solid; 
}

HTML

<div class="col1"> 
    <div>text</div> 
    <div>text</div> 
    <div>text</div> 
    </div> 
    <div class="col2"> 

     <div>text<br>text</div> 
    <div>text</div> 

    </div> 
    <div class="col3"> 
     <div>text</div> 
    <div>text</div> 
    <div>text</div> 
    <div>text</div> 
    <div>text</div> 

    </div>

來源

2013-07-13 16:36:58 user1721135

使用float：爲每個div留下，然後爲每個奇數div使用clear：left。這將工作跨瀏覽器，除了使用奇怪的孩子。你將不得不添加額外的標記和神聖的我爲此。不幸的是，這一個不幸的是

來源

2013-07-13 18:25:26

垂直堆疊在不同的列CSS只有

回答

相關問題