Question

我使用下面的css将此图像浮动到文本左侧。如何在同一页面上重复文本右侧的图像效果。例如，我需要在左右之间使用clearfix吗？

谢谢

.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>

Answer 1

使css更具体，例如：
我所做的是创建主超级类：.fl和.fr for float left和float right，只需应用它就可以使我的代码更清晰，当他们通过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

Answer 2

我只是将两个元素都浮动到左边。这将导致两个元素并排放置。

[HTML] （左图）

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

（Img在文本右侧）

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

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

2 个答案: