1

TYPO3 (簡略化) によって生成された次の HTML があります。

<div class="image">
    <img src="some-image.jpg"/>
</div>
<div class="text">
<p>
    <b>foo</b> Some text of varying length, sometimes multiple lines, sometimes not. sit amet enim ultrices a tempus nulla lobortis.
</p>
<p>
    <b>bar</b> Short text.
</p>
<p>
    <b>baz</b> Another paragraph. sit amet enim ultrices a tempus nulla lobortis. Cum ociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.
</p>

</div>

画像の div は左にフロートし、段落は<b>-tags 内の部分を箇条書きにしてリスト (ぶら下げインデント) としてフォーマットする必要があります。したがって、結果は次のようになります。

-------------------- foo Some text of varying length, sometimes
|                  |     multiple lines, sometimes not. sit amet enim
|                  |     ultrices a tempus nulla lobortis.
|      Image       | 
|                  | bar Short text.
--------------------
baz Another paragraph. sit amet enim ultrices a tempus nulla lobortis.
    Cum ociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.

この動作を実現するにはどうすればよいですか?

私の試みは、段落全体をp {padding-left: 50px;}でインデントし、太字のタグを でインデント解除することp b:first-child {margin-left: -50px;}でした。画像がない場合、または画像が右に浮いている場合は問題なく機能しますが、画像が左に浮いている場合は、「箇条書き」(<b>タグ) が画像の上にレンダリングされます。他のアプローチ（テキストインデントなどを使用）も試しましたが、問題は基本的に同じままです。

このソリューションは (:-)) IE6 で動作する必要はありません。他のブラウザーで動作しない場合は、おそらく許容されるでしょう。

編集:わかりました、TYPO3 機能を使用する解決策があります: コンテンツ要素の画像外観タイプを「テキスト内、左」から「テキスト以外、左」に変更します。div次に、TYPO3 が wi​​thクラスに十分な大きさの左マージンを追加するtextと、すべて正常に動作します。リストが画像よりも長い場合は、コンテンツ要素を 2 つに分割して、画像の下の段落を再び左に表示する必要があります。

4

2 に答える 2

3 
<div class="contain">
<div class="image">
<img src="some-image.jpg"/>
</div>
<div class="text">
<p style="margin-bottom:20px;text-indent:-20px;">
<b>foo</b> Some text of varying length, sometimes multiple lines, sometimes not. sit amet enim ultrices a tempus nulla lobortis.
</p>
<p style="text-indent:-20px;" >
<b>bar</b> Short text.
</p>
<p style="clear:both;text-indent:-20px;margin-left:20px;">
<b>baz</b> Another paragraph. sit amet enim ultrices a tempus nulla lobortis. Cum ociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed felis mauris, in rhoncus nisl.
</p>
</div>
</div>​

CSS:

.contain{
  width:400px;
 }
.image{
 margin-top:15px;
 margin-right:30px;
 float:left;
 width:120px;
 height:80px;
 border:thin red solid;
 }​

デモ

于 2012-09-24T20:32:05.777 に答える
1

これがあなたが探しているものかどうかはよくわかりませんがclear: both;、フローティングオブジェクトから「エスケープ」したいときにCSSで使用します。

.clearfloat
{
    clear:both;
}

例えば：

<img class="float"> ... </>
<h1 class="clearfloat"> Hello </h1>
于 2012-09-24T20:13:09.473 に答える