11/10 一部ソース等を修正
See the Pen usedbywp2 by nakanishi (@nakanishi) on CodePen.
ポイントはfloat: leftを使った際に、a、bは固定幅を指定して、cだけ伸縮させるために「calc(100% – 200px) ;」を使うことである。(calcの対応ブラウザに注意する必要はある)
.a { float: left; width: 100px ; } .b { float: left; width: 100px ; } .c { float: left; width: calc(100% - 200px) ; }
float: leftを全ての子要素に使った場合、親要素のheightがなくなるので、clearfixを用いる
また横一列に並べるために全ての子要素にfloat: leftを用いた場合、親要素に高さがなくなる。これに対処するためには、親要素にclearfixを与える。
(親要素の高さがなくなるのは、親要素の高さは明示的に指定していなければ「子要素」によって決まるが、floatを用いた要素は親要素から認識されないために、結果として親要素は「何も高さのある要素がない」と判断するからである。そのためclearfixというテクニックは、擬似的に最後に何もない要素を加えることで、仮想的に子要素に高さを与えることができる。)
<div class="container clearfix"> <div class="a">title</div> <div class="b">subtitle</div> <div class="c"></div> </div> <div class="container clearfix"> <div class="a">title</div> <div class="b">subtitle</div> <div class="c"></div> </div>
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }
width: 100%とwidth: autoの違い
- width: 100%はコンテンツ幅が100%になる
- width: atuoは、margin/paddingとコンテンツを含めた幅が100%になる。
1 thought on “display: table-cellを用いず、横並列並びをfloat: leftで実装する”