使用最小高度浮动的 2 x 2 div 网格

发布于 2024-12-13 01:16:17 字数 654 浏览 8 评论 0原文

我有 4 个 div 设置为 float:left;，每个 div 的 width: 400px; 位于 div 的 width:800px;< /代码>。目前，这会创建一个由良好对齐的 div 组成的 2 x 2 网格，我设置了 min-height: 150px; 属性，因为我需要允许 div 在添加或删除新内容时展开。

如果添加新内容，则 div 会展开，这会弄乱我当前拥有的良好对齐的 2 x 2 网格 div，因为高度不均匀，这附近是否存在？

<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;
}

原文

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.

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

林空鹿饮溪 2024-12-20 01:16:17

只需使用显示作为块，因为你向左浮动，这样你就必须分配宽度，这样它们就不会移出位置，一旦添加文本，高度就会自动增长，最小高度，不适用于较旧的浏览器，并且将被视为高度，这很糟糕:) http://www.webtoolkit.info/css-clearfix.html 你有一个漂亮的 css 解决方案来解决你的浮动左问题，它用在容器上以保持 div 自然 -

是的，检查如果你有

或或其他元素，有预定义的填充和边距，:)它们可能有点麻烦:)

我建议使用clearfix，因为它可以很好地与Web开发人员工具（例如firebug）上的检查元素配合使用和谷歌网络开发工具:)

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

<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%;
}

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 :)

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%;
}

回复收藏 0 原文