[CSS] 〜戒め〜 display: inline-blockのブロック直下に、floatが掛かっているブロックを置いてはいけない

今週ずっと徹夜が続いておりまして、体力的にも精神的にも限界でした。
そのおかげで脳みそが全く働いていない状態でハマってしまった、いや、これは完全に油断ですね。
きっともうちょっと気を引き締めよとのお告げなのです。

デザイン的にタイトルにinline-blockを使いたかったんです。
で、その直下に画像と説明文をfloatしたかったんです。

下記の画像をごらんください。

赤のブロック、これがタイトルで、その下に左右のfloatブロックがある。
タイトルの幅は100%ではなくて、中途半端な感じにしたかったんですよ。デザイン的事情で。

そしたら、float: leftをかけたブロックがinline-blockの左に回り込むという事態に。
多分これは仕様通りの動きなんだろうけど、ちょっと納得いかないすね。

安易にinline-blockを使うなという戒めである。

ちなみにソースコードは以下。
[html]
<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>
[/html]

解決策は?

ちょっとあんまり良い方法ではないんだけれど、inline-blockがかかってる要素か、floatの要素どちらかを別のボックスで囲ってやればおk。
下記の例だとdivを余計にひとつ追加してます。

[html]
<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>
[/html]

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください