固定と可変で作る。スマホサイトで片方を横幅可変にするやり方

スマートフォンサイトで、2つの要素を並べている場合、
デバイスの違いで、横幅が変わるときに、片方を固定幅、もう片方を可変幅にしたい場合があります。

左固定、右固定の場合と、vertical-align: middle;を使いたい場合との3種類のサンプルを作りました。

方法1 ネガティブmarginを利用する

ネガティブマージンを指定することでfloatでちょうど回り込むようにするやり方です。
sample01

cssでやること

  • 固定するdivには、widthをpx指定します。
  • 可変するdivには、widthを100%指定します。
  • 可変するdivに、固定するdivのwidthのサイズ分のmargin-leftを-(ネガティブマージン)で指定します。
  • 可変するdivの中にdivを作ります。
  • 中のdivに固定するdivのwidthのサイズ分のmargin-leftを指定します。
テキストだとわかりづらいと思うので、詳しくはサンプルをご確認ください。

方法2 display: table;を利用する

vertical-align: middle;を利用したい場合にはこちらを利用します。
sample02

ポイントは、table-layout: fixed;です。

table-layoutプロパティに「fixed」を指定する場合、幅が指定されていない列には残りの幅が均等に割り当てられますので、これを利用します。
sample03

cssでやること

  • 全体を囲むdivに

  • 固定するdivには、widthをpx指定します。display: table-cell;を指定します。
  • 可変するdivには、widthを100%;で指定します。display: table-cell;を指定します。
  • 可変するdivの中にdivを作ります。
  • 中のdivにinputタグを置く場合は、width: 100%;を指定します。
テキストだとわかりづらいと思うので、詳しくはサンプルをご確認ください。

リンク先のサンプルを表示

HTML

CSS