javascript - 根据内容和浏览器宽度更改 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>

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

希望这对您有所帮助。