假设我有如下内容:
<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 中
谢谢
最佳答案
实际上,对于网络标准,您不应该放置 <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>
有很多方法可以解决这个问题,但我认为这是最简单的方法。
希望这对您有所帮助。
关于javascript - 根据内容和浏览器宽度更改 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10747415/