时间戳

首页 > 解决方案 > 询问 CSS 专栏

html - 询问 CSS 专栏

问题描述

这是我的 CSS Column 代码 

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

这是我想要的专栏： 在此处输入图像描述

如何消除每列之间的垂直间隙。 在此处输入图像描述

标签： htmlcss

解决方案

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

这应该足够接近

推荐阅读