浮动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垂直空间

回答

相关问题