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

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

[markdown]
## float

こちらで勉強。

> * [CSSで要素を横並びにする方法まとめ | HALAWATA.NET](http://www.halawata.net/2011/10/css-float-display-box/)

装飾は省く。

“`html:sample.html

“`

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

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

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

* clearfix については[別途まとめる](/blog/2014/07/23_6493.html)。
* boxの高さを揃える方法も[別途まとめる](/blog/2014/07/18_6476.html)。
box の高さが揃わないと、折り返しで崩れました。

## inline-block

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

> * [高さの違うブロックを横並びで折り返した時の崩れを無くす – CSSテクニック – acky info](http://www.acky.info/tips/css/00029.html)

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

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

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

“`html:sample.html

“`

## display: table

追々調べる。

> * [CSS再入門 – display: tableの活用 1 | CodeGrid](https://app.codegrid.net/entry/css-table-1)

## 補遺

> * [jQueryAutoHeight: div box の高さを揃える | deadwood](https://www.d-wood.com/blog/2014/07/18_6476.html)
> * [[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-clearing-floats-with-overflow-by-webdesignerwall.html)
[/markdown]