CSS压痕

我喜欢做的事，如InDesign或夸克......段落缩进......对于picureCSS压痕

是如何做到这一点的HTML和CSS

我不想文本的正确方法走轮图像... 我喜欢整个左部保护投入保证金的图片就可以了，而是为了10-20-30像素（固定数额（坏））

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

这里是一个小小的图像解释！

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

来源

2009-09-26 menardmam

裹与p标签文本，设置两个div的 – 2009-09-26 14:29:13

你有没有试图把两者列和DIV和浮动他们离开，如：

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

离开将让他们并排侧，只要有足够的浮动的div房间。

来源

2009-09-26 11:11:21 cdonner

margin和padding这将无法正常工作，文字仍然漂浮在图像 – knittl 2009-09-26 14:18:38

伟大的解决方案，谢谢 – menardmam 2009-09-27 22:13:08

如果图片总是相同的宽度，你可以很容易地做到这一点。将图片放在一个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-26 11:12:51

如果图像将是相同的宽度，下面的代码应该工作（在Safari 4中测试）。

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

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-26 11:33:22

这是我知道的解决方案，但在图像被清除后，文本继续下去...至极我不想...... – menardmam 2009-09-26 22:30:06

如果它仅仅是一款你担心，你可以使用：

p { 
    overflow: hidden; 
}

但是，对于工作只是在图片旁边开始的段落。

来源

2009-09-26 14:04:53 jeroen

在任何情况下不推荐，但一个很好的选择，如果你不想/不能编辑您的标记：Equal height columns using Javascript

来源

2009-09-27 09:38:00 3zzy

回答

相关问题