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>-tags）会呈现在图像顶部。我也尝试过其他方法（使用文本缩进等），但问题基本保持不变。

该解决方案不需要(:-)) 在 IE6 上运行，如果它在其他浏览器中不起作用，那可能是可以接受的。

编辑：好的，我有一个使用 TYPO3 工具的解决方案：将内容元素的图像外观类型从“文本左侧”更改为“除了文本，左侧”。div然后 TYPO3 为with 类添加了足够大的左边距text，一切正常。如果列表比图像长，则必须将内容元素一分为二，以使图像下方的段落再次向左显示。

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 回答