html - 如何在不换行的情况下左右浮动图像

Question

我使用下面的 css 将此图像 float 到文本的左侧，效果很好。我将如何在同一页面上的文本右侧重复图像的效果。例如，我需要在左侧和右侧之间使用 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更具体，例如:
我所做的是创建主父类(super class):.fl 和 .fr 用于向左浮动和向右浮动，并在我进行时应用它，使我的代码更清晰，并且当他们通过 html 文档看到它时易于理解。 .innercontent img.fl{ 填充:0 0 0 185px； position:relative； 文本对齐:对齐；

.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