Столбцы CSS не будут выравниваться по горизонтали

Я использую количество столбцов, чтобы позволить моему тексту перетекать в два разных столбца, но верхняя часть первого столбца (крайний левый) ниже, чем другой столбец?

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

Я включил ограниченный раздел кода, и даже когда я заполняю его текстом, все еще есть разница в верхней части столбцов.

Источник

5 ответов

Решение
  #col{
     margin-top:0px;
  }
  #col h3{
      display:inline-block;
      vertical-align:top; // middle or bottom
  }
Источник

Используйте:

#col h3 {
  margin-top: 0;
}


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

#col 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:

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>

Источник

Дело в том, что 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>

Источник

Просто удалите верхнее поле с элемента h3

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

Источник
Другие вопросы по тегам