Question

我有以下HTML，由TYPO3生成（简化）：

<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> - 标签为子弹。所以结果应该是这样的：

-------------------- 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设施的解决方案：将内容元素的图像外观类型从“in text，left”更改为“除text，left”。然后TYPO3为div添加一个足够大的左边距，类text，一切正常。如果列表长于图像，则必须将内容元素拆分为两个，以使图像下方的段落再次显示。

Answer 1

<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;
 }

DEMO

Answer 2

我不太确定这是你在寻找什么，但是当我想要从浮动对象中“逃脱”时，我在CSS中使用clear: both;。

.clearfloat
{
    clear:both;
}

例如：

<img class="float"> ... </>
<h1 class="clearfloat"> Hello </h1>

当存在左浮动图像时，使用悬挂缩进格式化段落

2 个答案: