我有一堆内联块元素在几行,我想要水平中心.内嵌块元素都具有相同的固定大小,但我希望中心能够处理页面大小调整和添加或删除元素.
为了清楚起见,我已经删除了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>