我有一堆内联块元素在几行,我想要水平中心.内嵌块元素都具有相同的固定大小,但我希望中心能够处理页面大小调整和添加或删除元素.
为了清楚起见,我已经删除了html / css并删除了中心的尝试.在http://jsfiddle.net/fe25H/1/
如果调整结果窗口的大小,使第三个内嵌块元素下降,容器将填充宽度,我们得到：
-----------------BODY------------------ | | ||-------------CONTAINER-------------|| ||-INLINEBLOCK---INLINEBLOCK-- || |||____________||____________| || ||-INLINEBLOCK-- || |||____________| || ||___________________________________|| |_____________________________________|
而不是这样：
-----------------BODY------------------ | | | |----------CONTAINER---------| | | |-INLINEBLOCK---INLINEBLOCK--| | | ||____________||____________|| | | |-INLINEBLOCK-- | | | ||____________| | | | |____________________________| | |_____________________________________|
基于ptriek关于JavaScript解决方案的回答进行编辑：
Ptriek的代码是一个有用的起点;它适用于具体情况,但不适用于一般情况.我大部分重写它更灵活(见http://jsfiddle.net/fe25H/5/).
解决方法
在想了一下之后,我同意Wex的评论.
所以我提出了一个JavaScript解决方案(jQuery) – 我不是一个专家,所以代码可能会改进 – 但是我猜这是你所需要的：
var resizeContainer = function () {
var w_window = $(window).width();
var w_block = $('.inlineblock').width();
if (w_window < w_block * 3 && w_window >= w_block * 2) {
$('.container').width(w_block * 2);
} else if (w_window < w_block * 2) {
$('.container').width(w_block);
} else {
$('.container').width(w_block * 3);
}
};
$(document).ready(resizeContainer);
$(window).resize(resizeContainer);
body {
text-align:center;
}
.container {
display: inline-block;
background-color: #aaa;
text-align:left;
}
.inlineblock {
display: inline-block;
width: 200px;
height: 200px;
background-color: #eee;
}
<div class='container'>
<div class='inlineblock'></div>
<div class='inlineblock'></div>
<div class='inlineblock'></div>
</div>
