[HTML & CSS General] CSS: div box を横並びにする

公開日: 2014/07/17
更新日: 2018/11/14

棍棒だけでいけると思いきや、clearfix の呪文を知らないと倒せない。

Contents

float

こちらで勉強。

装飾は省く。

sample.html
<div class="item-container">
  <div class="item">Lorem</div>
  <div class="item">Lorem</div>
  <div class="item">Lorem</div>
</div>

clear: both; だけで色々見比べると倒せていない。

sample.scss
.item {
  float: left;
}
.item-container {
  overflow:hidden;
  *zoom:1;
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

いろいろ増えているのは clearfix 関連の記述。
知らないと倒せないパターン。

inline-block

高さが不揃いでも折り返しで崩れないようにしてみます。

以下メモ的なソースです。

sample.scss
.item {
  display: inline-block;
  vertical-align: top;
  width: 220px;
}
.item-container {}

html に改行が含まれると隙間ができてしまうので、これをコメントアウトなどする。

sample.html
<div class="item-container">
  <div class="item">Lorem</div><!--
  --><div class="item">Lorem</div><!--
  --><div class="item">Lorem</div>
</div>

display: table

追々調べる。

補遺