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


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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-09_12_14_39

“display: table-cellを用いず、横並列並びをfloat: leftで実装する” への 1 件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です