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

デザイン的にタイトルに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>

• ツイート