我有一个包装器和两个元素:左侧div和右侧div。左侧div仅包含可能非常长的文本。右侧div包含异步加载的图像,我们不知道其宽度:
<div id="wrapper">
<div id="left">TEXT TEXT TEXT TEXT</div>
<div id="right">IMAGE</div>
</div>
我希望以如下方式显示所有内容:
+-----------------------------+ | | | #wrapper | | | | +----------+ +--------+ | | | | | | | | | #left | | #right | | | | | | | | | +----------+ +--------+ | | | +-----------------------------+为此,我准备了以下 CSS:
#wrapper{
width: 600px;
display: inline-block;
}
#left{
float: left;
width: 400px;
}
#right{
float: left;
width: 200px;
}
现在我想为这个布局添加一些响应式。左侧div的最小宽度应为200px,因此如果右侧的图像宽度大于400px,则应跳到下一行,并以以下方式将左侧div扩展到包装器的100%: + -----------------------------+ | |#wrapper | | | | | + ----------------------+ | | | | | | |#left | | | | | | | + ----------------------+ | | | | +--------------+ | | | | | | |#right | | | | | | | +--------------+ | | | + -----------------------------+
没有使用JavaScript,如何实现这一点?
我找到了这个解决方案:http://jsfiddle.net/fxWg7/1865/,唯一的区别是当左侧div太小时,右侧div应该跳到下一行而不是左侧div。
应该像这样:
#left.width = #wrapper.width - #right.width;
if (#left.width < 200px) {
#left.width = 100%;
#right move to new line;
} else {
display #left div on left side and #right div next to #left div
}