如何在没有文字换行的情况下左右浮动图像答案

【问题标题】：How to float images left and right without text wraps如何在没有文字换行的情况下左右浮动图像
【发布时间】：2012-06-05 01:08:15
【问题描述】：

我使用下面的 css 将这张图片浮动到文本的左侧，效果很好。我将如何重复同一页面上文本右侧的图像效果。例如，我需要在左右之间进行清除吗？

谢谢

.innercontent {
padding: 0 0 0 185px;
position: relative; 
text-align:justify;
}

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

【问题讨论】：

标签： html css image css-float

【解决方案1】：

使 css 更具体，例如：
我所做的是创建主超类：.fl 和 .fr 用于向左浮动和向右浮动，并在我去的时候应用它，使我的代码更清晰，当他们通过 html 文档看到它时易于理解。 .innercontent img.fl{ 填充：0 0 0 185px；位置：相对；文本对齐：对齐； }

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

如果不清楚，请发布到此：D

【讨论】：

这里有一个 jsfiddle 可以玩，我用一些似乎可以做你想做的事情来填充它：jsfiddle.net/ctcET

【解决方案2】：

我会将两个元素都浮动到左侧。这将导致两个元素并排放置。

[HTML] （左图）

<div class="innercontent">
   <img class='floatLeft' />
   <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
   <div class='cleaner'></div>
</div>

（文本右侧的图像）

<div class="innercontent">
    <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
    <img class='floatLeft' />   
    <div class='cleaner'></div>  
</div>

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.floatLeft{float: left;}

清洁器用于在浮动元素之后将下一个元素返回到左侧。我总是在浮动元素后放这个。没有它通常可以正常工作，但我倾向于使用其他“无浮动”元素来浮动元素。

同样在css中，你可能需要直接指定img来浮动。我不确定确切的语法，但类似于 ...

.floatLeft>img{float: left;}

【讨论】：