今週ずっと徹夜が続いておりまして、体力的にも精神的にも限界でした。
そのおかげで脳みそが全く働いていない状態でハマってしまった、いや、これは完全に油断ですね。
きっともうちょっと気を引き締めよとのお告げなのです。
デザイン的にタイトルにinline-blockを使いたかったんです。
で、その直下に画像と説明文をfloatしたかったんです。
下記の画像をごらんください。
赤のブロック、これがタイトルで、その下に左右のfloatブロックがある。
タイトルの幅は100%ではなくて、中途半端な感じにしたかったんですよ。デザイン的事情で。
そしたら、float: leftをかけたブロックがinline-blockの左に回り込むという事態に。
多分これは仕様通りの動きなんだろうけど、ちょっと納得いかないすね。
安易にinline-blockを使うなという戒めである。
ちなみにソースコードは以下。
<style> body { background: #ededed; font-size: 14px; } div#column { width: 600px; margin: 0 auto; padding: 10px; background: #fff; } div#column h2.inline-block { display: inline-block; width: 300px; background: #FFBCBD; margin: 0 0 10px; font-size: 14px; } div#column h2.block { display: block; width: 300px; background: #FFBCBD; margin: 0 0 10px; font-size: 14px; } div#column h2.block span { font-weight: normal; font-size: 12px; } section { clear: both; } p { margin: 0; } div.boxL { display: block; width: 240px; float: left; background: #AFECFF; } div.boxR { display: block; width: 240px; float: left; background: #BFFFBD; } .clear { clear: both; } </style> <div id="column"> <section> <h1>想像していた表示</h1> <h2 class="block">inline-blockでタイトル <pre> div#column h2.inline-block { display: inline-block; width: 300px; background: #FFBCBD; margin: 0 0 15px; } </pre> <span>※表示のために、実際はdisplay: blockと書いています。</span> </h2> <div class="boxL">floatLボックス <pre> div.boxL { display: block; width: 240px; float: left; background: #AFECFF; } </pre> </div> <div class="boxR">floatRボックス <pre> div.boxR { display: block; width: 240px; float: left; background: #BFFFBD; } </pre> </div> </section> <p class="clear">↓</p> <section> <h1>実際の表示</h1> <h2 class="inline-block">inline-blockでタイトル <pre> div#column h2.inline-block { display: inline-block; width: 300px; background: #FFBCBD; margin: 0 0 15px; } </pre> </h2> <div class="boxL">floatLボックス <pre> div.boxL { display: block; width: 240px; float: left; background: #AFECFF; } </pre> </div> <div class="boxR">floatRボックス <pre> div.boxR { display: block; width: 240px; float: left; background: #BFFFBD; } </pre> </div> </section> </div>
解決策は?
ちょっとあんまり良い方法ではないんだけれど、inline-blockがかかってる要素か、floatの要素どちらかを別のボックスで囲ってやればおk。
下記の例だとdivを余計にひとつ追加してます。
<section> <h1>解決策1</h1> <h2 class="inline-block">inline-blockでタイトル <pre> div#column h2.inline-block { display: inline-block; width: 300px; background: #FFBCBD; margin: 0 0 15px; } </pre> </h2> <div> <div class="boxL">floatLボックス <pre> div.boxL { display: block; width: 240px; float: left; background: #AFECFF; } </pre> </div> <div class="boxR">floatRボックス <pre> div.boxR { display: block; width: 240px; float: right; background: #BFFFBD; } </pre> </div> </div> </section> <section> <h1>解決策2</h1> <div> <h2 class="inline-block">inline-blockでタイトル <pre> div#column h2.inline-block { display: inline-block; width: 300px; background: #FFBCBD; margin: 0 0 15px; } </pre> </h2> </div> <div class="boxL">floatLボックス <pre> div.boxL { display: block; width: 240px; float: left; background: #AFECFF; } </pre> </div> <div class="boxR">floatRボックス <pre> div.boxR { display: block; width: 240px; float: right; background: #BFFFBD; } </pre> </div> </section>