CSS中不同高度的块的垂直对齐[重复]

2024-02-05

我试图达到类似的效果this https://blaskdemo.wordpress.com/。也就是说，我有一些块（这里，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>

我想如果我将文章设置到预定义的列中会更容易then在此列中垂直对齐，但据我所知，上面给出的示例中的情况并非如此（可能具有能够动态更改列数的优点）。

这甚至可以在 CSS 中做到吗？或者他们使用一些复杂的 JavaScript 来实现这一点？

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

EDIT

我链接的页面的一个重要行为是我没有提到的是，文章的显示顺序或多或少与列出的顺序相同，因此可以保留时间顺序。

这里有几个选项，这完全取决于您希望块的顺序以及元素之间的空间。

您可以在下面的脚本中看到所有正在运行的技术。

简而言之。 CSS 在这里可能还不够。

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

显示：内联块；
显示：表；
Floats
columns
flexbox

显示：内联块让您控制垂直对齐。而你的顺序是从左到右。但空间没有被正确利用。

显示：表行为与 inline-block 大致相同；（取决于设置）但这在这里没有多大帮助。

floats:更好地利用空间。但它的行为有点奇怪。（这里尝试切换 DOM 中的元素。）

colums:空间利用得很好。但顺序是基于列，而不是文本方向。您可能会在这里遇到一些 webkit 特定的错误。

flexbox:能为你做很多事。控制这里的顺序很棘手。由于换行是基于列的。否则它的行为类似于内联块；

JS 来救援。

我不愿意承认这一点，但 javascript 可能是正确的选择。您可以使用一种称为同位素或砖石的东西。这样，顺序是基于文本方向的，并且空间得到了正确的使用。

...

您还可以使用其他 CSS 技术，也许会得到更好的结果。但目前这些浏览器支持有限：

CSS 区域 https://docs.webplatform.org/wiki/tutorials/css-regions
CSS 网格布局 http://www.w3.org/TR/css3-grid-layout/

$(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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css