如何使图像左右浮动而不换行

发布于 2025-01-01 09:14:46 字数 458 浏览 1 评论 0原文

我使用下面的 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>

原文

I have this image floated to the left of text working fine using the css below. How would I repeat the effect for an image to the right of text on the same page. Do I need a clearfix between the left and right for example?

Thanks

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹏雨一样淡蓝的深情 2025-01-08 09:14:46

使 css 更具体，例如：
我所做的就是创建主超类：.fl 和 .fr 分别用于向左浮动和向右浮动，然后立即应用它，使我的代码更清晰，并且当他们在 html 文档中看到它时易于遵循。
.innercontent img.fl{
内边距：0 0 0 185px；
位置：相对；
文本对齐：对齐；
D

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

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

make the css more specific such as:
What i do is create master super class: .fl and .fr for float left and float right and just apply it as i go makes my code cleaner and easy to follow when they see it through out the html document.
.innercontent img.fl{
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>

just post to this if wasn't clear :D

回复收藏 0 原文

回忆那么伤 2025-01-08 09:14:46

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

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

I would just float both elements to the left. This will cause both elements to site side-by-side.

[HTML]
(Img on left)

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

(Img on right of text)

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

The cleaner is used to return the next element back to the left after a floated element. I always put this after I float elements. It's usually works fine without it, but I tend to float elements with other "no floated" elements inside.

Also in the css, you may have to specify the img directly to float. I'm not sure the exact syntax but something like ...