3

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

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

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

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

4

3 回答 3

2

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

这是我最终解决问题的方法（实际上使用 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);    
}

我编写了一个脚本，它采用容器宽度，将其除以单个盒子的大小，将其放置在地板上，这为我们提供了适合容器的盒子数量。然后它将这个盒子的数量乘以盒子的宽度，然后给我们轮廓的新尺寸。新大小设置为轮廓，因此带有所有框的轮廓始终保持居中，右侧不会出现奇怪的空白。

于 2013-07-24T16:49:26.597 回答
1

我通过在方形元素周围添加几个容器 div 并使用显示和文本对齐来使用纯 CSS 来做到这一点。在此处查看演示

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版本稍后添加

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

于 2013-07-24T13:09:26.587 回答
0

如果您想使用媒体查询来处理这个问题，那么它可能类似于

@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 插件以使其工作。谷歌是你的朋友

于 2013-07-24T15:04:48.990 回答