垂直排列浮动DIV与不同的高度？ [英] Vertically aligning floated DIVs with varying heights?

问题描述

查看我的 JSfiddle 了解目前的情况

See my JSfiddle to see what currently happens

我有一些不同高度内容的div。

I have some divs with content of varying height. The width is always the same.

每一行都应该包含两列，但是我希望行中每个div的开头都在同一个高度。对比这里说的jQuery Masonry插件，其中所有的砖挤在一起去除空格。

Each row should contain two columns, but I would like the start of each div in a row to be at the same height. Contrast this to say the jQuery Masonry plugin, where all the "bricks" are squeezed together to remove spaces.

有什么好的，跨浏览器的方式来实现？我的想法是清除每第二个第n个孩子的浮动，但我相信IE不支持这个？

What's a good, cross-browser way to achieve this? My idea was to clear the float for every 2nd nth child, but I believe IE doesn't support this?

我相信我也可以使用jQuery做一些事情，但是它整洁吗？下次遇到问题时，我是否已经学过了什么？

I believe I could also do something with jQuery, but is it tidy? Will I have learnt anything in order to fix it next time the problem occurs?

HTML：

<div id="a" class="box">        Some content<br />Div A</div>
<div id="b" class="box">        Some content<br />Div B</div>
<div id="c" class="box">        Some content<br />Div C</div>
<div id="d" class="box">        Some content<br />Div D</div>
<div id="e" class="box">        Some content<br />Div E</div>
<div id="f" class="box">        Some content<br />Div F</div>

CSS：

.wrapper { width: 444px; }
.box {
    width: 200px;
    border: 1px solid #333;
    float: left;
    margin: 0 10px;
    }
#a { height: 200px; }
#b { height: 180px; }
#c { height: 100px; }
#d { height: 80px; }
#e { height: 50px; }
#f { height: 50px; }

推荐答案

这是你的想法吗？它使用jQuery，并添加一点额外的标记 - 不确定是否可以接受。

Is this what you had in mind? It does use jQuery and adds a bit of extra markup - not sure if that's acceptable.

http://jsfiddle.net/Awg3u/7/

我目前只在Chrome / FF测试，并尚未在IE中签到。

I've only tested in Chrome/FF so far, and haven't checked in IE yet.

这篇关于垂直排列浮动DIV与不同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！