Question

我有点无法绕过它，也很难在网上找到合适的解决方案/这里很难制定。

基本上我想要的是像左对齐图像的居中对齐。所以它应该是一个居中的动态宽度父div（宽度取决于浏览器宽度），它保存带有图像的div，这些图像以一行显示，但是新行应该左对齐。

使用Isotope达到目标没有问题。中心砌体显示我想要的行为。如果您调整浏览器的大小，父div将调整其宽度，子项将自行重新定位并“填充一行”，保持“居中”。但是，没有“填满的线”将保持左对齐。

有没有办法在不使用js或其他任何东西的情况下达到div的完全相同的行为（没有动画即^^）？我希望有点清楚我的意思。提前谢谢！

Answer 1

我不知道这是否是关闭此问题的正确方法，但我要感谢所有回复我的问题的人。所以我想只能用CSS创建这种行为是不可能的。需要jQuery或Media Queries才能获得正确的行为。

以下是我最终解决问题的方法（实际使用jQuery）： 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);    
}

我写了一个脚本，它取容器的宽度，用一个盒子的大小除以它，然后放置它，这给了我们装入容器的盒子数量。然后它将此框数量与框宽度相乘，然后为我们提供轮廓的新尺寸。新尺寸设置为轮廓，因此所有框的轮廓始终保持居中，并且右侧不会出现奇怪的空白区域。

Answer 2

我通过在方形元素周围添加几个容器div并使用显示和文本对齐来实现纯CSS。查看演示here

HTML：

<div id='container'>
    <div id='outline'>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <div class='innerbox'></div>
        <!-- As many as you want -->             
    </div>
</div>

CSS：

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

根据以下评论注意

当盒子占据多行时，最右边的盒子和容器的右边之间有一个空格。没有某种javascript，这个小空间是不可能完全删除的

编辑以使用javascript添加完整功能

这是我尝试使用javascript和jQuery实现完整功能：demo here。由于添加了<br/> s，缩小窗口大小时仍然存在故障，但我会寻找修复，除了你的答案之外，代码可能对某些用户有用。我认为我的解决方案比你的更通用。很高兴我能帮助你找到正确的想法！

稍后添加的纯JavaScript版

Here是我此目标的最新版本。它是纯粹的javascript，不需要容器，并删除硬编码的填充值

Answer 3

如果你想使用媒体查询来处理这个问题，那么它可能就像

@media only screen and (max-width: 1280) {
   .innerBox {
        width: 20%;
    }
}

@media only screen and (max-width: 1024) {
   .innerBox {
        width: 10%;
    }
}

@media only screen and (max-width: 768) {
   .innerBox {
        width: 5%;
    }
}

这些宽度我只是任意数字。以％表示的宽度也是任意的，但是如果你想让盒子很好地适应100％，那么它们需要能够均匀地划分为100.我没有包含任何填充或边距，我相信你可以把这个部分弄清楚。请记住，IE8及更低版本等传统浏览器不支持媒体查询。但是你可以下载js插件来使它们工作。谷歌是你的朋友

左对齐居中动态宽度父级中的子项

3 个答案: