2 x 2 div网格使用浮动与最小高度 [英] 2 x 2 div grid using float with min-height

问题描述

我有4个div设置为 float：left; 每个都有 width：400px; c $ c> div with width：800px; 。这当前创建一个2×2网格的对齐的div，我设置属性 min-height：150px; ，因为我需要允许divs扩展为添加新内容，

I have 4 divs set to float:left; each with a width: 400px; within a div with width:800px;. This currently creates a 2 x 2 grid of nicely aligned divs I set a property of min-height: 150px; because I need to allow divs to expand as new content is added or removed.

如果添加了新内容，则会展开一个div，这会混乱很好对齐的2 x 2网格div，因为高度不均匀是有？

If new content is added a div is expanded this messes up the nicely aligned 2 x 2 grid div I currently have because the heights are uneven is there anyway around this?

<div class="boxContainer">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
}

推荐答案

因为你是浮动左，那样你就必须分配，宽度，所以他们不移动位置，一旦文本添加，高度将自动增长，最小高度，不工作在旧的浏览器和将被视为高度，这是可怕的:) http://www.webtoolkit.info/css- clearfix.html 你有一个漂亮的css解决方案，你的float左问题，它用于容器保持div自然 -

just use display as block, because you are floating left, that way you would have to assign , the width so they don't move out of position, once the text is added, the height will,grow automatically, min-height, does not work on older browsers and will be treated as height, which is terrible :) http://www.webtoolkit.info/css-clearfix.html you have a beautiful css solution to your float left problem, it's used on containers to keep the div natural –

是的，检查你是否有

或其他元素，有预定义的填充和边距，:)他们可以有点痛苦的屁股：）

yes, check if you have

or or other elements, that have predefined padding, and margin, :) they can be a bit of pain in the ass :)

我建议使用clearfix，因为它工作得很好，在web开发工具如firebug和google web开发工具检查元素:)

I recommend using clearfix, because it works well with, inspect element on web developer tools such as firebug, and google web dev tools :)

所以你有完全控制这里是代码:)

so you have full control here is the code :)

<div class="boxContainer clearfix">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
    display: block;
}
/* I would put this at the top of the page, and minimise the newlines :) if you want to remove the "." (dot) then use this  content: "\00A0"; which puts a whitespace,  */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

这篇关于2 x 2 div网格使用浮动与最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！