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