Question

我正在努力实现类似于this的效果。也就是说，我有一些块（这里，articles）具有相同的宽度，但可以有不同的高度，我希望它们在它们的上邻居旁边。当内联显示文章并使用顶部垂直对齐时，文章仍按预期保留在他们的行上：

<html>
<head>
<style>
  article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0; }
</style>
</head>
<body>
<div style="width:630px; background-color:#F0F0F0">
<article style="height:100px;"></article><article style="height:200px;"></article><article style="height:300px;"></article><article style="height:200px;"></article><article style="height:200px;"></article><article style="height:100px;"></article>
</div>
</body>
</html>

我想如果我将文章设置为预定义列然后在此列中垂直对齐，这会更容易，但AFAICT在上面给出的示例中并非如此（可能具有以下优势：能够动态改变列数。）

这是否可以在CSS中执行此操作？或者他们是否使用了一些复杂的JavaScript来实现这一目标？

（另外作为旁注，我需要让articles彼此相邻，没有换行符，以防止虚假的空格出现在其间，但这似乎不是上面页面中的问题）。

修改

我链接的页面的一个重要行为是我没有提到的是文章的显示顺序与它们列出的顺序相同，所以保留了时间顺序。

Answer 1

这里有几个选项，它取决于你想要块的顺序以及元素之间的空间。

您可以在下面的脚本中看到所有技巧。

简而言之。 CSS可能还不够。

首先让我们看看这里可能有用的所有CSS技术。

显示：内联块;
显示：表格;
浮筒
列
Flexbox的

display：inline-block 可让您控制垂直对齐。而你的订单是从左到右。但空间使用不当。

display：table 的行为与inline-block大致相同; （取决于设置）但它在这里不会有太多帮助。

花车：更好地利用空间。但它表现得有点奇怪。（尝试在这里切换DOM中的元素。）

colums：非常好地使用空间。但顺序是基于列，而不是文本方向。你可能会在这里遇到几个特定于webkit的错误。

flexbox：可以为您做很多事。在这里控制订单很棘手。由于包装基于列。否则它的行为类似于内联块;

JS也是救援。

我讨厌承认，但javascript可能是正确的选择。你可以使用一种叫做同位素或砖石的东西。这样，顺序基于文本方向，空间使用得当。

...

您可以使用其他CSS技术，也许可以获得更好的结果。但是现在这些浏览器支持有限：

$(function(){
  $('.masonry').masonry({
    // options
    itemSelector : '.masonry article'});
});

hr  {
 clear: left; 
}

article {
  width: 32%;
  margin-top: 15px;
  
  color: #fff;
  font-size: 20px;
}

.inline-block article {
  display: inline-block;
  vertical-align: top;
}

.float article {
  float: left;
  width: 32%;
  margin-left: 3px;  
}

.columns {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;

  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
}
  .columns  article{
     width: 100%;
  }

.flexbox {
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  max-height: 500px;
}
  .flexbox article {
    margin-left: 3px;  
  }

.masonry article {
  margin-left: 3px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>

Inline-block: 
<div class="inline-block">
  <article style="height:300px;background:red">1</article>
  <article style="height:100px; background:blue">2</article>
  <article style="height:200px;background:green">3</article>  
  <article style="height:100px;background:orange">4</article>
  <article style="height:200px;background:purple">5</article>
  <article style="height:200px;background:black">6</article> 
</div>

<hr />

Floats: 
<div class="float">
  <article style="height:300px;background:red">1</article>
  <article style="height:100px; background:blue">2</article>
  <article style="height:200px;background:green">3</article>  
  <article style="height:100px;background:orange">4</article>
  <article style="height:200px;background:purple">5</article>
  <article style="height:200px;background:black">6</article>   
</div>

<hr />

Columns: 
<div class="columns">
  <article style="height:300px;background:red">1</article>
  <article style="height:100px; background:blue">2</article>
  <article style="height:200px;background:green">3</article>  
  <article style="height:100px;background:orange">4</article>
  <article style="height:200px;background:purple">5</article>
  <article style="height:200px;background:black">6</article>   
</div>

<hr />

Flexbox: 
<div class="flexbox">
  <article style="height:300px;background:red">1</article>
  <article style="height:100px; background:blue">2</article>
  <article style="height:200px;background:green">3</article>  
  <article style="height:100px;background:orange">4</article>
  <article style="height:200px;background:purple">5</article>
  <article style="height:200px;background:black">6</article>   
</div>

<hr />

Masonry (JS): 
<div class="masonry">
  <article style="height:300px;background:red">1</article>
  <article style="height:100px; background:blue">2</article>
  <article style="height:200px;background:green">3</article>  
  <article style="height:100px;background:orange">4</article>
  <article style="height:200px;background:purple">5</article>
  <article style="height:200px;background:black">6</article>   
</div>

Answer 2

您可以使用CSS列。

＆＃13;

div {
  width: 630px;
  background-color: #F0F0F0
}
div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

＆＃13;

<div>
  <article style="height:100px; background:blue"></article>
  <article style="height:200px;background:green"></article>
  <article style="height:300px;background:red"></article>
  <article style="height:200px;background:purple"></article>
  <article style="height:200px;background:black"></article>
  <article style="height:100px;background:orange"></article>
</div>

＆＃13;

Answer 3

我已经尝试过很多不同的方法来完成这个CSS和我的拙见（我不想这么说）单独使用CSS是不可能的。

Flexbox，网格，列，表格布局，花车......我尝试过的技术都没有能够处理这个特定的布局问题。

我能得到的最接近的是flexbox或float结合clearfixes。但是，当您的网站响应时，您将遇到很多布局问题。

根本问题是您事先并不知道容器的高度。您必须根据它计算高度并重新排列所有其他容器（并且您必须为将来/过去创建的每个容器执行此操作）。

所以，你可以尝试使用CSS，你可能会接近（在忽略旧版浏览器的情况下，使用CSS 的方式计算方框 - nth-child选择器会为你做到这一点）但是你不会达到你的布局和你提供的那个demo（blaskdemo）一样灵活的地步 - 不幸的是。

CSS

3 个答案:

简而言之。 CSS可能还不够。

JS也是救援。