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 中文本的长度有多长 ) 。这是否可能只显示直线的 cs 。还是我需要 JQuery 来做到这一点?

NOTE : 元素也必须垂直地相互和在外插管内相互集中

谢谢

Answer 1

实际上,对于网络标准,您不应该将 lt; div> 放在 lt; img> 或 ; lt; img> 和旁边。

The solution to your question is to wrap all contents within #outer, say each item wrapped up in a tag, then applied some CSS to them (like float: left).
For example,

<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>

如果你也希望它垂直居于外, 你的CS就会像这样。

<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 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>

需要为 < code> inline block 进行一些跨老浏览器工作,但你明白我的意思。

Presto < a href=> http://jsfiddle.net/EPpAn/" rel="no follow" > http://jsfiddle.net/EPpAn/

Answer 4

我希望这是你想要的:http://jsfiddle.net/linmic/CCut8/

干杯干杯

友情链接