div没有高度 - 如何使它们坚持并避免空白

Question

Demo Link

CSS：

.box {
    width: 150px;
    vertical-align: top;
    padding: 30px;
    margin: 3px;
    overflow: hidden;
    margin-top: 3px;
    display: inline;
    float: left;
    border: 1px solid black;
}

我试图将这些div对齐，没有运气。我们怎样才能使它们坚持前一个div

Answer 1

有许多jQuery库：

• 时代提到的Masonry
• Gridster
• Freewall
• Elastic Columns
• GridList
• Nested

Answer 2

像这样？用。创建一个容器div

font-size:0;

从框类css中删除所有边距，而不是将其显示为内联浮动，转到内联块

.box{
    width: 150px;
    vertical-align: top;
    padding: 30px;
    overflow:hidden;
    display: inline-block;
    border: 1px solid black;
}

然后，重新设置所有子元素的字体大小：

h3 {font-size:20px;}
p {font-size:15px;}

的jsfiddle 1：http://jsfiddle.net/8hHA2/6/

添加保证金左：-1px;所有盒子的属性除了第一个修复丑陋的双边距：

2的jsfiddle：http://jsfiddle.net/8hHA2/8/

Answer 3

试试这个

.box {
        width: 150px;
        vertical-align: top;
        padding: 30px;
        margin: 3px;
        overflow: hidden;
        margin-top: 3px;
        display: inline-block;
        vertical-align:top;
        float: left;/**remove**/
        border: 1px solid black;
    }

Answer 4

如果你想让它们彼此相邻，它们之间没有任何空间，试试这个：

   .box{
    width: 150px;
    vertical-align: top;
    padding: 10px;  
    overflow:hidden;
    margin-top: 3px;
    display: inline-block;
    float: left;
    border: 1px solid black;
    position:relative;
    min-height:200px;
    max-height:210px;
    overflow-y: scroll;

}

但是，在此设计中，div中将包含滚动条。希望它有所帮助..或者你可以使用上面提到的库。

Answer 5

HTML：

 <div id="container">
    <div id="boxdiv">
                <div class="box">
                    <h3>TITLE</h3> 

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, iusto, voluptatibus autem non eaque veniam modi reprehenderit ducimus. Officiis, repellat.</p>

                </div>

                <div class="box">
                    <h3>TITLE2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, saepe laborum natus laboriosam nesciunt aperiam.</p>
                </div>
                <div class="box">
                    <h3>TITLE3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, dolore molestias deserunt ex magnam esse a perferendis necessitatibus omnis. Dolore, eaque dolorem nesciunt fuga rerum dolores asperiores officia quidem!</p>
                </div>
                <div class="box">
                    <h3>TITLE4</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, voluptatibus, veniam, eligendi magnam reiciendis numquam impedit tenetur accusantium voluptas laudantium praesentium consequatur recusandae deserunt delectus consequuntur esse commodi illum iure.</p>
                </div>
        </div>

CSS：

#container {
font-size:0;
}


.box{
    width: 150px;
    vertical-align: top;
    padding: 30px;

    overflow:hidden;

    display: inline-block;
    border: 1px solid black;
}

h3 {
font-size:20px;
}
p {
font-size:15px;
}