Question

我喜欢这样做，如在indesign或Quark中...段落缩进...用于图片

在html和css

中如何正确地执行此操作

我不希望文字围绕图像... 我喜欢整个左侧部分受到保护将边距放到图片上就可以了！但是对于10-20-30像素（固定金额（坏））

我尝试过负面定位..没有运气！

这是一个解释的小图片！

alt text http://produits-lemieux.com/indent.jpg

Answer 1

您是否尝试将两列放入div并将其向左浮动，如：

<div style="float:left;">
  <img src="x"/>
</div>
<div style="float:left;">
  Text ....
</div>

只要有足够的空间，左侧的浮动div将保持并排。

Answer 2

如果图像的宽度相同，则应使用以下代码（在Safari 4中测试）。

基本上：将图像浮动到左侧，然后使用边距将文本推向右侧（填充也可以）。（边距必须至少是图像的宽度;最好是它应该更大，以便图像和文本之间有间隙。）

HTML：

<div class="box">
    <img src="http://url.to/image.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="source">Source: Le Petit Robert 2009</p>
</div>

CSS：

img {
    float: left;
}

p {
    margin-left: 80px;
}

Answer 3

如果图片的宽度始终相同，则可以非常轻松地完成。将图片放在一个div中，将内容放在另一个div.pic { position: relative; float: left; padding-right: 10px; clear: left; width: 65px; /* The width of the picture */ } div.content { position: relative; float: left; clear: right; width: 450px; /* The container's width minus (picture + 10px padding) }中。然后使用以下css：

{{1}}

Answer 4

如果只是您关注的一个段落，您可以使用：

p {
    overflow: hidden;
}

但这仅适用于图像旁边的段落。

Answer 5

不建议在所有情况下使用，但如果您不想/不能编辑标记，则不是一个好的选择：Equal height columns using Javascript

缩进

5 个答案: