询问 CSS 专栏 [重复]答案

【问题标题】：Ask about CSS column [duplicate]询问 CSS 专栏 [重复]
【发布时间】：2019-04-05 09:24:16
【问题描述】：

这是我的 CSS 列代码

<div id="a">
    <div class="b"></div>
    <div class="b" style="height:30px;"></div>
    <div class="b" style="height:30px;"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<style>
    #a {
        position: relative;
        display: block;
        background:yellow;
        width:500px;
    }

    .b {
        background:pink;
        width: 40%;
        display: inline-block;
        height:50px;
        vertical-align: top;
        margin:10px;
    }
</style>

这是我想要的专栏：

如何消除每列之间的垂直间隙。

【问题讨论】：

可以使用砌体插件masonry.desandro.com
@athi 没有任何插件，只是纯 html 和 css ？

标签： html css

【解决方案1】：

从

中移除style属性

 <div class="b" style="height:30px;"></div>
 <div class="b" style="height:30px;"></div>

并将边距设置为较小的值，例如 3px

编辑：如果你需要改变高度，你需要采用不同的方法来解决这个问题。见下文。

.a {
  display: inline-block;
  background: yellow;
  width: 500px;
  width: 40%;
}

.b {
  background: pink;
  vertical-align: top;
  margin: 3px;
}

.container {
  display: inline-block;
}

<div class="contaisner">
  <span class="a">
  	<div class="b">a<br>a<br>a<br>a<br></div>
	  <div class="b">a<br>a<br>a<br></div>
	  <div class="b">a<br>a<br>a<br>a<br></div>
  </span>
  <span class="a">
	  <div class="b">a<br>a<br>a<br></div>
	  <div class="b">a<br>a<br>a<br>a<br></div>
	  <div class="b">a<br>a<br>a<br>a<br></div>
  </span>
</div>

这应该足够接近

【讨论】：

问题是每个盒子的高度会不一样
你应该创建一个不同的类来放置不同的高度
我编辑我的代码，高度将基于它的内容
这不是答案@Donny。你应该把它放在评论部分
@athi 这不可能是评论。此外，你评论告诉他为此使用插件？

【解决方案2】：

您可以将 column-count 赋予外部 div 并将外部 div 添加到子元素。 break-inside: avoid; 应该给子元素。

<div id="a">
  <div class="b">
    <div></div>
  </div>
  <div class="b" style="height:30px;">
    <div></div>
  </div>
  <div class="b" style="height:30px;">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
</div>
<style>
  #a {
    position: relative;
    display: block;
    background: yellow;
    width: 500px;
    column-count: 2;
    padding: 10px;
  }
  
  .b {
    background: pink;
    break-inside: avoid;
    height: 50px;
    margin: 10px;
  }
</style>

【讨论】：