Question

我使用列数来允许我的文本流入两个不同的列，但第一列（最左边）的顶部低于另一列？

＆＃13;

cat >>/etc/p/supervisord.conf <<EOF

blabla

EOF

＆＃13;

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

＆＃13;

我已经包含了有限的代码部分，即使我用文本填充它，列顶部仍然存在差异。

Answer 1

使用：

#col h3 {
  margin-top: 0;
}

＆＃13;

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

#col h3 {
  margin-top: 0;
}

＆＃13;

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

＆＃13;

Answer 2

只是一点CSS：

<强> CSS ：

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  position:relative;
}
h3{display:inline-block;width:100%;}
// Best would be #col > * , because all direct children must be affected.

<强> HTML ：

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

<强>段：

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  position:relative;
}
h3{display:inline-block;width:100%;}

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

Answer 3

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

Answer 4

只需从h3元素中删除上边距

text_alignment

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

h3 {
  margin-top: 0;
}

Answer 5

h3元素默认情况下margin-top导致此问题。删除边距会修复它，如下面的代码段所示。

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
h3 {
  margin-top: 0;
  }

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

CSS列不会水平对齐

5 个答案: