应用错误收集

水平对齐不同高度的元素

时间：2013-11-28 10:27:49

标签： css alignment

我正在构建一个网页，搜索结果应该水平对齐。元素可能有不同的高度。

我想要复制的例子是：

Google Plus发布布局
同位素（http://isotope.metafizzy.co）。

我尝试使用浮动元素，但你可以在这个Plunkr中看到我的失败 http://plnkr.co/8ex35N8OraWZBnbE5EoY

1 个答案:

答案 0 :(得分：5)

选项＃1：nth-child

如果您有固定数量的列，则可以使用：

/* Style */
.item { background: yellow; width: 48px; border: 1px solid black; }
.item:nth-child(2n) { background: blue; }
.item:nth-child(3n) { background: red; }

/* Position */
.container {
    width: 200px;
}
.item {
    float: left;
}
.item:nth-child(4n+1) {
    clear: left;
}

<div class="container">
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo</div>
    <div class="item">foo<br>bar<br>baz</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault</div>
    <div class="item">foo</div>
    <div class="item">foo<br>bar<br>baz</div>
</div>

选项＃2：clearfix

在IE9下，您可以使用clearfix：

/* Style */
.item { background: yellow; width: 48px; border: 1px solid black; }
.item:nth-child(2n) { background: blue; }
.item:nth-child(3n) { background: red; }

/* Position */
.container {
    width: 200px;
}
.item {
    float: left;
}
.clear {    
    clear: both;
    height: 0px;
}

<div class="container">
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo</div>
    <p class="clear">&nbsp;</p>
    <div class="item">foo<br>bar<br>baz</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault</div>
    <div class="item">foo</div>
    <div class="item">foo<br>bar<br>baz</div>
</div>

选项＃3：行

在IE9下执行此操作的另一种方法是：添加行。

/* Style */
.item { background: yellow; width: 48px; border: 1px solid black; }
.item:nth-child(2n) { background: blue; }
.item:nth-child(3n) { background: red; }

/* Position */
.container {
    width: 200px;
}
.item {
    float: left;
}
.row {    
    clear: both;
}

<div class="container">
  <div class="row">
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo</div>
  </div>
  <div class="row">
    <div class="item">foo<br>bar<br>baz</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault</div>
    <div class="item">foo</div>
    <div class="item">foo<br>bar<br>baz</div>
  </div>
</div>

选项＃4：列

此选项需要重新排列项目顺序。

/* Style */
.item { background: yellow; width: 48px; border: 1px solid black; }
.item:nth-child(2n) { background: blue; }
.item:nth-child(3n) { background: red; }

/* Position */
.container {
    width: 200px;
}
.column {
    width: 50px;
    float: left;
}

<div class="container">
    <div class="column">
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
        <div class="item">foo<br>bar</div>
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply</div>
    </div>
    <div class="column">
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
        <div class="item">foo<br>bar</div>
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
    </div>
    <div class="column">
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux</div>
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred</div>
        <div class="item">foo<br>bar<br>baz<br>qux</div>
    </div>
    <div class="column">
        <div class="item">foo<br>bar<br>baz</div>
        <div class="item">foo<br>bar<br>baz</div>
        <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
    </div>
</div>

选项＃5：砌体

最后，一个带有Masonry的JS解决方案：

var container = document.querySelector('.container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 50,
  itemSelector: '.item'
});

/* Style */
.item { background: yellow; width: 48px; border: 1px solid black; }
.item:nth-child(2n) { background: blue; }
.item:nth-child(3n) { background: red; }

/* Position */
.container {
    width: 200px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<div class="container">
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
    <div class="item">foo<br>bar</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred<br>plugh<br>xyzzy<br>thud</div>
    <div class="item">foo<br>bar</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge<br>grault<br>garply<br>waldo<br>fred</div>
    <div class="item">foo<br>bar<br>baz<br>qux</div>
    <div class="item">foo<br>bar<br>baz</div>
    <div class="item">foo<br>bar<br>baz</div>
    <div class="item">foo<br>bar<br>baz<br>qux<br>quux<br>corge</div>
</div>