我想在容器 div 中对齐 3 个 div,如下所示:
[[左] [中] [右]]
容器 div 为 100% 宽(无固定宽度),中心 div 应在调整容器大小后保持居中。
左右DIV没有固定宽度,需要随容器伸缩。中心 DIV 确实具有固定宽度。
我有这个:
<div style="width: 100%">
<div style="float: left; height: 50px;"></div>
<div style="float: right; height: 50px;"></div>
<div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>
问题是,左右不显示,因为没有设置宽度
有什么建议吗?
最佳答案
你不能用纯 CSS 做到这一点。您需要使用 JavaScript。在下面的示例中,中间 div 固定为 400px,而剩余空间在左右 div 之间分配。使用 jQuery 你可以做到
function calc() {
var ww = $(window).width();
var rem = ww - $('.div2').width();
$('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);
在 http://jsfiddle.net/M5Ghx/3/ 查看工作示例
关于javascript - 100% 宽度容器内的中心 div,左右浮动宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5574710/