将固定宽度的子元素集中在未知宽度的父容器中

Question

HTML / CSS开发人员！ 陷入了一个奇怪的场景 将尝试通过图像解释我的查询。 需要它至少在IE 8或9中工作。

点数： 它是一种响应式布局的方法，

.container {width:100%;margin-left:auto;margin-right:auto;display:block;}
.parent-container {width:auto;overflow:hidden;margin:0 auto;display:block}
.child-element {width: 285px;float:left
}

层次 .container＆gt; .parent-container＆gt; .child元素

标签：  我有一个100％的容器

在里面，我有一个父容器{没有宽度声明（红色背景颜色）} 在里面，我有一个固定宽度的子元素。

我想要的是，无论我的屏幕尺寸是多少，如果有3个子元素或4个子元素的空间，我的父元素应始终位于中心。

子元素的宽度应该对父元素宽度

有贡献

这就是我的

这就是我得到的

这就是我想要的（看看父宽度因子元素而减少）

FIDDLE

http://jsfiddle.net/happy2deepak/9wm7ppwL/2/

Answer 1

你需要一些javascript来根据窗口宽度更新父容器的宽度，你可以通过将窗口宽度除以子宽度（包括填充和边距）来实现它，并采取最大可能的子项，即地板分割结果

function setContainerWidth(){
    var childWidth = 305, 
        winWidth = $(window).width(), 
        parentContainer = $('body').find('.parent-container'), 
        minChildren,
        containerCalculatedWidth;

        minChildren = Math.floor(winWidth / childWidth);
        parentContainer.css("width", minChildren * childWidth);
}

setContainerWidth();

$(window).resize(setContainerWidth);

fiddle，了解其运作方式。