浮動DIVs垂直空間

我想問如何做DIV浮動左邊，但填充垂直空間的DIV上面。我在這裏找到了使用Masonry JQuery插件的解決方案，但是我想問一下是否可以簡單地通過css來完成。如果你看下面的代碼或者jsfiddle，我需要將BOX5與BOX2垂直對齊，所以沒有空間。謝謝浮動DIVs垂直空間

請參閱的jsfiddle：http://jsfiddle.net/9ahxjzm8/

HTML：

<div class="wrapper"> 
    <div class="box"> 
     BOX1 
     fgwertgege 
     erhehethrtjh 
     sthsrtjhrt 
     rthrthrt 
     ehertuyrtyr 
    </div> 
    <div class="box"> 
     BOX2 
     sadgergwerwert 
     adrfgaeghr 
    </div> 
    <div class="box"> 
     BOX3 
     sefweflj 
     gewrgheher5y 
     tryjrtjhr 
     rthrthrthrthrth 
    </div> 
    <div class="box"> 
     BOX4 
     sgwhej rtjrtjktyt 
     dfgherthrthrt rth rtst 
     ert erterty 
     ertye ryeryewe w ergerge r gertgerg 
    </div> 
    <div class="box"> 
     BOX5 
     agwerheh 
     etherthrtjhr 
     ertherthrthrth 
     ergergyhr 
    </div> 
</div>

CSS：

div.box { 
    width: 500px; 
} 

div.box { 
    width: 30%; 
    background-color:green; 
    float:left; 
    border: 1px solid; 
    margin-left: 5px; 
    word-wrap: break-word; 
}

來源

2014-11-21 Lukáš Ježek

如果你不知道你的專欄的高度，你可以按照[本教程]（http： //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks） – 2014-11-21 20:16:32

謝謝，但那不是我所需要的，我想擁有不同高度的列 – 2014-11-21 20:31:46

設置一個高度或最小高度將做到這一點。只需將下面的代碼行添加到您的CSS（div.box），您就會很好。

min-height: 100px; /* Adjsut as needed */ 

margin: 0 0 5px 5px; /* Adjsut as needed to keep the spaces uniform */

點擊here看到我對你所做的更改，它的優良現在

激進的做法：如果您添加的代碼行下面你的CSS，它將始終保持一致，但將削減關閉（不顯示）任何超出給定值的最大高度。

min-height: 100px; 

max-height: 200px; 

overflow: hidden;

jQuery的解決方案：按照下面的一個良好的書面教程CSS技巧

Equal Height Blocks in Rows

注意鏈接：給它一個固定的高度將導致到如果假定的內容中的問題超出可用空間。最大的盒子總是會給你一個關於爲最小高度設置什麼值的想法。

來源

2014-11-21 20:13:43

謝謝，非常接近我想看起來像什麼。我建議你這麼做，但如果你看看http://jsfiddle.net/9ahxjzm8/3/，你可以看到BOX2和BOX5之間的垂直空間比BOX3和BOX4之間的空間大。 – 2014-11-21 20:35:40

您製作了最小高度：1px。總是讓最小高度的值比最高的箱子的大小高一點，你就會很好。 http://jsfiddle.net/9ahxjzm8/4/ – 2014-11-21 20:46:03

，當我試圖讓BOX1內容較短它使BOX1和了Box5之間有很大的空間（見http://jsfiddle.net/9ahxjzm8/5/）等等我不確定設置最小高度是否是該解決方案。當我嘗試刪除左側的浮動塊並使用內聯塊時，也是如此。那麼，也許真的沒有簡單的解決方案，我將不得不使用砌體jquery。如果您有任何更多的想法，請提前致謝。 – 2014-11-21 20:58:31

目前，您沒有設置.box div的明確高度，因此它們的高度目前取決於內部的內容。如果你不想在它們之間有任何空間，那麼你要麼必須設置相同的height或相同的min-height.box

來源

2014-11-21 20:19:19

浮動DIVs垂直空間

回答

相關問題