在CSS中具有不同高度的块的垂直对齐 [英] Vertical alignment of blocks with different heights in CSS

问题描述

我想达到类似这个的效果。也就是说，我有一些块（这里，文章）具有相同的宽度，但可以有不同的高度，我想要他们的旁边他们的上层邻居。当在线显示文章并使用顶部垂直对齐时，文章仍然保持在其预期的行上：

 < 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> height：100px;>< / article> 
< / div> 
< / body> 
< / html> 
  

我想这将更容易，如果我将文章设置为预定义列 em>在此列中垂直对齐，但AFAICT在上面给出的示例中不是这样（可能具有动态更改列数的优点）。

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

（另外一个方面，我需要文章相邻，没有换行符，以防止在它们之间出现虚假的空格，但这似乎并不是上面的页面中的问题。）

编辑

我链接的页面的一个重要行为，我没有提到的是，文章或多或少地按照列出的顺序显示，因此按时间顺序

解决方案

这里有几个选项，这一切都取决于你想要的块的顺序

总之。 CSS在这里可能不够用。

首先让我们来看一下所有的CSS技巧。

• 显示：inline-block;


• 显示：表格;


• 浮动


• 列


• flexbox

display：inline-block 让您控制垂直对齐。
和你的顺序是从左到右。
但是空间未正确使用。

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

float：更好地使用空间。
但它的行为有点奇怪。 （尝试在此处切换DOM中的元素。）

colums：非常好地使用空间。
但是顺序是基于列，而不是文本方向。
这里可能会运行webkit的一些bug。

flexbox：可以做很多。
这里控制顺序是棘手的。因为wrap是基于列的。
否则它的行为类似于inline-block;

JS太抢救。

我不愿承认，但javascript可能是正确的选择。
有一些叫做同位素或砌体的东西可以使用。
这种方式是基于文本方向的，并且空格正确使用。

...

还有其他CSS技术，你可以使用，也许得到一个更好的结果。
但是现在有限的浏览器支持：

• CSS Regions


• CSS网格布局

  $（function（）{$（'。masonry'）。masonry（{// options itemSelector：'.masonry article'}）;}）;  

pre class =snippet-code-css lang-css prettyprint-override> hr {clear：left; } article {width：32％; margin-top：15px; color：#fff; font-size：20px;}。inline-block文章{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 />浮动：< 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 />栏：< 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>  

I am trying to achieve an effect similar to this. That is, I have some blocks (here, articles) that have the same width but can have different heights, and I want them to be next to their upper neighbors. When displaying the article inline and using a top vertical alignment, the articles still stay on their lines as expected:

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

I guess this would be easier if I would set the articles into predefined columns then align vertically within this columns, but AFAICT this is not the case in the example given above (with possibly the advantage of being able to dynamically change the number of columns).

Is this even possible to do this in CSS? Or are they using some complicated JavaScript to achieve this?

(Also as a side note, I need to have articles next to each other without line breaks to prevent spurious white spaces to appear in between, but this doesn't seem to be a problem in the page above).

EDIT

An important behavior of the page I linked that I failed to mention is that the articles are displayed more or less in the same order than they are listed, so that chronological order is preserved for example.

解决方案

There are a couple option here, it all depends on the order you want the blocks to be in and the space between the elements.

You can see all the techniques in action in the script below.

In short. CSS might not be enough here.

First lets look at all the CSS-techniques that might be helpful here.

• Display: inline-block;
• Display: table;
• Floats
• columns
• flexbox

display: inline-block lets you control the vertical-alignment. And you the order is left to right. But the space is not used properly.

display: table behaves about the same as inline-block; (Depends on the settings) But it wont help here much.

floats: uses the space better. But it behaves kinda strange. (Try to switch the elements in the DOM here.)

colums: Uses the space very well. But the order is based on columns, and not the text-direction. And you might run in couple of webkit specific bugs here.

flexbox: Can do very much for you. Controlling the order here is tricky. Since the wrap is based on columns. Otherwise it would behave similar to inline-block;

JS too the rescue.

I hate to admit it but javascript might be the right choice here. There is something called isotope or masonry that you could use. This way the order is based on text-direction and the space is used properly.

...

There are other CSS Techniques you could use and maybe get a better result. But those have limited browser support by now:

• CSS Regions
• CSS 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>

这篇关于在CSS中具有不同高度的块的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！