CSS列将不会水平对齐 [英] CSS Columns will not horizontally align

问题描述

我正在使用列数以使文本流入两个不同的列，但第一列的顶部(最左侧)低于另一列?

I am using column count to allow my text to flow into two different columns but the top of the first column (leftmost) is lower than the other column?

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

<div id="col">
  <h3>
    Options
  </h3>
  <h3>
    Features and Benefits
  </h3>
  <h3>
    Specifications
  </h3>
  <h3>
    hey
  </h3>
  <h3>
    30 Years Experience
  </h3>
</div>

我只包含了一段有限的代码，即使我用文本填充它，列的顶部仍然存在差异.

I have included a limited section of the code, and even when I fill it with text, there is still a difference in the top of the columns.

推荐答案

  #col{
     margin-top:0px;
  }
  #col h3{
      display:inline-block;
      vertical-align:top; // middle or bottom
  }

这篇关于CSS列将不会水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！