Question

我可以在左侧浮动一个图像，只需在图像上指定float: left就可以将文本环绕在它周围。像这样：

<div id='foo'>

  <img src='bar' alt='baz' style='float: left;' />
  Lorem ipsum...

</div>

然而，如果图像被包裹在如下所示的div中，则无法在div#image_container和div#text_container

上声明固定宽度时达不到相同的效果

<div id='image_container'>
  <img src='blah' alt='blah' />
</div>

<div id='text_container'>
  Lorem ipsum... long text
</div>

有没有办法保持第一个解决方案的灵活性，避免声明宽度并让div#image_container浮动在div#text_container旁边？

Answer 1

尝试在包装器div上设置overflow: hidden，它应自动将div设置为图像的宽度。

好吧也许我误解了你的问题。你只是希望文本在图像周围流动吗？如果是这样，你应该需要的就是这个CSS：

#text_container { display: inline; }

Answer 2

#text_container,
#image_container {
  display: inline;
}

应该这样做。试试这个：

<html>
    <head>
    <style>
        #top {
            float: left;
            display: inline;
            border: 1px solid green;
        }

        #bottom {
            float: right;
            display: inline;
            border: 1px solid red;
        }
    </style>
    </head>
    <body>
    <div id="top">
        I'm the top div
    </div>
    <div id="bottom">
        I'm the bottom div
    </div>
</html>

但是如果你的div的内容大于你为他们留下的宽度（可能是它）那么你就会挣扎。你应该给它一个宽度，但上面可能对你有用，这取决于你想要如何使用它。

Answer 3

而不是文本容器使用段落标记（<p></p>）。它将包含内容，并且更易于访问和语义。

浮动div而不指定宽度

3 个答案: