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

比如说，我有如下内容：

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

这里有一些文字。。。

我的

内部分区

包含一些文本。我如何使它不仅显示我的第一个图像、我的内部div和我的第二个图像，而且确保我的

outer

div的总宽度扩展到浏览器窗口的整个宽度（无论我的内部div中的文本有多长，我的元素仍然彼此相邻显示）。这是直接使用css实现的，还是我需要一些jQuery来实现这一点

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

---

谢谢

实际上，对于web标准，您不应该将

放在

一些很长的文本

哪个

.内部{
浮动：左；
}

如果您还希望它垂直居中于外部，您的css将如下所示

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

#外{
显示：表格；
}
.内部{
显示：表格单元格；
垂直对齐：中间对齐；
}

有更多的方法，但我认为这是最简单的方法

---

希望这有帮助。

实际上，对于web标准，您不应该将

放在

一些很长的文本

哪个

.内部{
浮动：左；
}

如果您还希望它垂直居中于外部，您的css将如下所示

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

#外{
显示：表格；
}
.内部{
显示：表格单元格；
垂直对齐：中间对齐；
}

有更多的方法，但我认为这是最简单的方法

---

希望这能有所帮助。

如果我没弄错的话，我想这就是你想要的

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

#外部#内部_div{float:left；}
#外部img{清除：左；}

如果我理解正确，我想这就是你想要的

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

#外部#内部_div{float:left；}
#外部img{清除：左；}

试试这个

CSS

HTML

这里有一些文字。。。

对于

内联块

，您需要一些跨旧浏览器的工作，但您已经明白了

普雷斯托

试试这个

CSS

HTML

这里有一些文字。。。

对于

内联块

，您需要一些跨旧浏览器的工作，但您已经明白了

---

我想这就是你想要的：

---

干杯我想这就是你想要的：

---

干杯

您这样做只是为了网络浏览器吗？还是手机？你这样做只是为了网络浏览器吗？还是移动的？我希望元素也能彼此垂直居中。“垂直对齐”属性似乎不起作用，如果我在元素上使用浮点，您可以尝试将“显示类型”更改为“外部表格”，将“显示类型”更改为“内部表格单元格”，然后您可以将“垂直位置”设置为“中间”。我已编辑了我的答案，请再次阅读。希望它能有所帮助：-）我希望元素也能彼此垂直居中。“垂直对齐”属性似乎不起作用，如果我在元素上使用浮点，您可以尝试将“显示类型”更改为“外部表格”，将“显示类型”更改为“内部表格单元格”，然后您可以将“垂直位置”设置为“中间”。我已编辑了我的答案，请再次阅读。希望能有所帮助：-）

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

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