浮动div没有指定宽度

我可以漂浮在左边的图像，并有文字环绕它没有问题，只需通过在图像上指定float: left。像这样：浮动div没有指定宽度

<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旁边？

来源

2010-01-12 Lorenzo

看到这个问题：http://stackoverflow.com/questions/2042645/setting-widthauto-leads-to-width100 – Boldewyn 2010-01-12 13:41:52

@Boldewyn我申请显示：内联 - 阻止我的#text_container和#image_container的包装div，但只有在文本宽度比剩余宽度短时才有效。我真的应该用js来计算宽度吗？ – Lorenzo 2010-01-12 14:11:02

#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的内容是比你留给他们（这大概是）宽度更大，那么你将很难。你应该真的给它一个宽度，但上述可能会为你工作，取决于你想如何使用它。

来源

2010-01-12 13:46:44

谢谢，如果文本短于宽度（这不是我的情况），这是行不通的：（ – Lorenzo 2010-01-12 14:07:40

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

来源

2010-01-12 15:34:24

）如果它要包装图像，那么语义怎么样？ – JoseMarmolejos 2010-02-14 22:24:47

我喜欢用自己的html标签包装代码。我将div限制为模板级编码，因此这就是我使用段落标记的原因。 – 2010-03-04 15:02:19

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

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

#text_container { display: inline; }

来源

2010-01-12 15:35:47 DisgruntledGoat

Like Colt .45 ... 每次都有效 – tahdhaze09 2010-01-12 15:37:28

我仍然需要设置text_container的宽度 – Lorenzo 2010-01-12 17:01:59

浮动div没有指定宽度

回答

相关问题