0

画像を左側に配置し、その右側に 2 つのテキスト フィールドを配置する最適な標準的な方法は何ですか? フロートを使用していますか？ポジショニング？

<li>
<a href=""> <img src=""THUMB HERE /> </a>
<a href=""> TITLE </a>
<span> META DATA </span>
</li>

これは結果になるはずです：

ここに画像の説明を入力

私はそれを行う方法を求めていません。クロスブラウザの互換性とクリーンなコードに関して、それを行うための最良の方法を求めています。

ありがとう！

4

2 に答える 2

0

フロートの使用。

<li>
<div style="float:left">
<a href=""> <img src=""THUMB HERE /> </a>
</div>
<div style="float:left;padding-left:10px">
<a href=""> TITLE </a>
<span> META DATA </span>
</div>
<div style="clear:both">
</div>
</li>
于 2012-10-12T14:24:52.143 に答える
0

明らかな解決策はフロートです：

デモ: http://jsfiddle.net/SO_AMK/wA8dj/

CSS:

li { display: inline-block; }
/* Keep it from being full width, if you define a width, skip this. */
li span.left { float: left; }
li span.right { float: right; }

ブラウザのスクリーンショット: http://imageshack.us/g/1/9808161/

スクリーンショットは FX11、Chrome 18、Safari 5.1、IE 8 & 9 のものです。IE 7 ではインライン ブロックが壊れて全幅になります。

于 2012-10-12T14:38:39.753 に答える