CSS - 页面右侧的图像,文字未环绕

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3738964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:47:28  来源:igfitidea点击:

CSS - Image on right side of page with text not wrapping around it

css

提问by Starkey

This is probably a simple question, but I can't figure it out. I would like to use CSS to put an image on the right side of a page and not wrap text around it. I would like it like this:

这可能是一个简单的问题,但我无法弄清楚。我想使用 CSS 将图像放在页面的右侧,而不是在其周围环绕文本。我想要这样:

                ------------
                |    img   |
                |          |
                ------------
text text text text text text
text ....

If I do a float:right on the image, I get this:

如果我在图像上做一个 float:right ,我会得到这个:

text text text  ------------
text text text  |   img    |
text text text  |          |
text text text  ------------
text text text text text text
text ...

I could easily use tables to do this, but I would like pure CSS.

我可以很容易地使用表格来做到这一点,但我想要纯 CSS。

回答by Rohrbs

Something similar to this should work:

类似的东西应该可以工作:

<div>
  <div style="width: 100%">
    <img style="float:right;">
  </div>
  <div>
    text
  </div>
</div>

回答by Ross

<div>
        <img src="img.jpg" style="float:right;" />
        <div style="clear:right;">
            <!-- text here -->
        </div>

</div>

perhaps?

也许?