根据内容和浏览器宽度更改div宽度

Question

假设我有以下内容：

<div id="outer">
    <img src="my_first_image.gif" alt="My first image" />
    <div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>

我的inner_div包含一些文本。 如何做到这一点，以便不仅使我的第一个图像，内部div和第二个图像彼此相邻显示，而且还要确保outer div的总宽度能够扩展到浏览器窗口的整个宽度（无论我的div中的文本变多，我的元素仍然会彼此相邻显示）。 仅使用纯CSS就有可能吗？还是我需要一些jQuery来做到这一点？

注意：元素还必须相对于彼此并在外部div内垂直居中

谢谢

Answer 1

其实，对于网络标准，你不应该把<div>旁边<img>或<img>旁边<div>

您问题的解决方案是将所有内容包装在#outer ，说出每个项目都包装在标记中，然后将一些CSS应用于它们（例如float: left ）。
例如，

<div id="outer">
   <div class="inner"><img src=".."/></div>
   <div class="inner"><img src=".."/></div>
   <div class="inner">some very long text</div>
</div>

哪一个

<style type="text/css">
   .inner {
      float: left;
   }
</style>

如果您还希望它垂直于外部居中，则CSS就是这样。

<style type="text/css">
   #outer {
      display: table;
   }
   .inner {
      display: table-cell;
      vertical-align: middle;
   }
</style>

有更多方法可以解决此问题，但我认为这是最简单的方法。

希望这可以帮助。

Answer 2

我想这就是您想要的，如果我理解正确的话？

<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}

</style>

Answer 3

尝试这个

CSS

#outer{
  width:100%;
}
#outer div, #outer img{
  width:33%;
  display:inline-block;
  vertical-align:middle;
  text-align:center;
}

HTML

<div id="outer">
  <img src="my_first_image.gif" alt="My first image" />
  <div id="inner_div">Some text here...</div>
  <img src="my_second_image.gif" alt="My second image" />
</div>

对于inline-block ，需要一些跨浏览器的工作，但是您明白了。

Presto http://jsfiddle.net/EPpAn/

Answer 4

我期望这就是您想要的： http : //jsfiddle.net/linmic/CCut8/

干杯