1

我喜欢这样做，如 indesign 或 quark... 段落缩进... for picure

如何在 html 和 css 中做到这一点的正确方法

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

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

这是一个解释的小图像！

替代文字 http://produits-lemieux.com/indent.jpg

4

5 回答 5

5

您是否尝试过将两列都放入和 div 并将它们向左浮动，如：

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

只要有足够的空间，左侧的浮动 div 将使它们并排放置。

于 2009-09-26T11:11:21.757 回答
3

如果图像将具有相同的宽度，则以下代码应该可以工作（在 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;
}
于 2009-09-26T11:33:22.570 回答
0

如果图片总是相同的宽度，你可以很容易地做到这一点。将图片放在一个div中，将内容放在另一个中。然后使用以下css：

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)
}
于 2009-09-26T11:12:51.457 回答
0

如果只是你关心的一段，你可以使用：

p {
    overflow: hidden;
}

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

于 2009-09-26T14:04:53.457 回答
0

并非在所有情况下都推荐，但如果您不想/不能编辑您的标记，这是一个很好的选择：使用 Javascript 的等高列

于 2009-09-27T09:38:00.217 回答