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的总宽度扩展到占据整个宽度浏览器窗口（无论我的内部文本中的文本有多长，我的元素仍然会彼此相邻显示）。这可能只是直接的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/

干杯

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

4 个答案: