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

スマートフォンサイトで、２つの要素を並べている場合、 デバイスの違いで、横幅が変わるときに、片方を固定幅、もう片方を可変幅にしたい場合があります。 左固定、右固定の場合と、vertical-align: middle;を使いたい場合との３種類のサンプルを作りました。 方法1 ネガティブmarginを利用する ネガティブマージンを指定することでfloatでちょうど回り込むようにするやり方です。 cssでやること 固定するdivには、widthをpx指定します。 可変するdivには、widthを100%指定します。 可変するdivに、固定するdivのwidthのサイズ分のmargin-leftを-(ネガティブマージン)で指定します。 可変するdivの中にdivを作ります。 中のdivに固定するdivのwidthのサイズ分のmargin-leftを指定します。 テキストだとわかりづらいと思うので

[oreskboys]

[display:table;][固定と可変][display:table-cell;][table-cell][可変][右側可変][文章可変][横幅可変][display]

[w6500]

固定幅と可変幅のレイアウト