javascript - change div width based on content and browser width

Question

Let's say I have something like below:

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

My inner_div contains some texts. How do I make it so that I not only display my first image, my inner div and my second image next to one another and also make sure that the total width of my outer div expand to take the full width of the browser window (with my elements still displayed one next to each other no matter how long the text in my inner div becomes). Is this possible with just straight css or am I gonna need some jQuery to do that?

NOTE : The elements must also be vertically centered with regards to each other and within the outer div

Thank you

Answer 1

实际上，对于 web 标准，您不应该放在<div>next<img>或<img>next 旁边<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/

干杯