左对齐在居中动态宽度父对象中的儿童 [英] Left align children in a centered dynamic width parent

问题描述

我不能用我的头围绕它，它也很难找到正确的解决方案在网络/这里，因为它很难制定。

I kinda can't wrap my head around it and it is also hard to find the proper solution on the web/here as it is hard to formulate.

基本上我想要的是像左对齐图像的中心对齐。因此，它应该是一个居中的动态宽度父div（宽度取决于浏览器宽度），其中包含呈现在一行中的图像的div，但新行应该左对齐。

Basically what I want is something like a centered justifiation with left aligned images. So it should be a centered dynamic width parent div (width depends on browser width), which holds divs with images which are presented in a line, but a new line should be left aligned.

使用同位素达到这个目标没有问题。
居中的砖石完全显示我想要的行为。如果你调整浏览器的大小，父div将调整其宽度，孩子们将重新定位自己和填满一条线，保持居中。

I have no problem reaching that goal with Isotope. The centered masonry displays exactly the behavior I want. If you resize the browser, the parent div will adjust its width and the childs will reposition themselves and "fill up a line", staying "centered". But a not "filled up line" will stay left aligned.

有没有办法达到完全相同的行为（没有动画是^^）的divs ，不使用js或其他什么？我希望它是清楚我的意思。提前感谢！

Is there a way to reach exactly the same behavior (well without animation that is ^^) of the divs, without using js or anything else? I hope it is kinda clear what I mean. Thanks in advance!

推荐答案

我不知道这是否是关闭这个问题的正确方法，但我想要感谢大家回答我的问题。所以我想这是不可能创建这种行为只有使用CSS。需要jQuery或媒体查询才能获得正确的行为。

I don't know if this is the correct way to close this question, but I would want to thank everybody responding to my question. So I guess it is not possible to create this behavior only with CSS. jQuery or Media Queries are needed to get the proper behavior.

这是我终于解决了这个问题（实际上使用jQuery）：
http://jsfiddle.net/Ewtx2/

Here is how I finally resolved the issue (using jQuery actually): http://jsfiddle.net/Ewtx2/

HTML

<div id='container'>
<div id='outline'>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
    <div class='innerbox'></div>
</div>
</div>

CSS

#container {
    width:100%;
    text-align:center;
    border: 1px red dashed;
}
#outline {
    text-align: left;
    font-size:0;
    display: inline-block;
    padding-left:5px;
    padding-bottom:5px;
    /* for ie6/7: */
    *display: inline;
    border: 1px black dashed;
    zoom:1;
}
.innerbox {
    display:inline-block;
    height:50px;
    margin-top:5px;
    margin-right:5px;
    width:50px;
    background:red;
}

jQuery

var boxAmount = 0;
var newWidth = 0;
setNewWidth();

$(window).resize(function() {
    setNewWidth();
});

function setNewWidth() {
    // get container width and check how many boxes fit into it (account margin/padding)
    boxAmount = ($('#container').width() - 5) / ($('.innerbox').width() + 5);
    boxAmount = Math.floor(boxAmount);
    // multiply the box amount with the box width to get the new width to hold the box amount + padding
    if(boxAmount <= $('.innerbox').length) { 
        newWidth = boxAmount * $('.innerbox').width() + boxAmount * 5; 
    }
    // set the new calculated width
    $('#outline').width(newWidth);    
}

我写了一个脚本，它接受容器宽度，单个盒子，地板，它给我们的盒子装入容器的量。然后它将这个盒子的数量乘以盒子的宽度，然后给我们大纲的新的大小。新的大小设置为轮廓，因此所有框的轮廓总是保持居中，并且没有出现奇怪的白色空间。

I wrote a script that takes the container width, divides it by the size of a single box, floors it, which gives us the amount of boxes fitting into the container. Then it multiplies this box amount with the box width, which then gives us the new size for the outline. The new size is set to the outline and thus the outline with all the boxes always stays centered and no strange white space to the right appears.

这篇关于左对齐在居中动态宽度父对象中的儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！