dtの方が高さが有る時のdt dd を横並び

久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。

おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい

dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。

---- こっから続き

実際の表示は下のような感じ。

SQ Lifeのバナーです。

SQ Lifeのバナーです。

スタイルは以下のようになられます。

dl#sample_070228 dt {
	float:left;
	clear:both;
	width:125px;
	margin-right:10px;
	margin-bottom:20px;
	border-bottom:0;
}
dl#sample_070228 > dd {
	float:left;
	width:300px;
}
*+html dl#sample_070228 > dd {
	float:none;
}

精査をしきってないですけど、dl dtを横並びにする場合のポイントはfloat:left;とclear:both;をどっちもdtに指定することかな。

最初の頃って何となく、同時に使えないような印象があったからそういう発想が出なかったって人も、居たりしないでしょうか？（ボクだけ？

htmlは以下のような感じで。

<dl id="sample_070228">
<dt><img src="/img/bnr_sqlife.gif" alt="sqBnr" /></dt>
<dd>SQ Lifeのバナーです。</dd>
<dt><img src="/img/bnr_sqlife.gif" alt="sqBnr" /></dt>
<dd>SQ Lifeのバナーです。</dd>
</dl>

定義リストの使い方とか、考えもコレまた人それぞれでしょうけど、辞書的なイメージとかっすかね。
aに対しての説明とかそういうの。

一番使いどころがある気がする。
・・・の割には使いこなせてないのがボクの現状ですが。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•