display: table-cellを用いず、横並列並びをfloat: leftで実装する

Tweet

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%になる。