Question

我希望在容器div中包含许多内联块元素。随着容器div的调整大小，出现在/向上/向下的内嵌块元素的数量会发生变化。我希望保持这些div左对齐，使它们看起来像：

XXXXXXX
XXXXXXX
XXX

和不喜欢：

XXXXXXX
XXXXXXX
  XXX

但需要保持左右边距相等。所以左右最多的div在任何时候都与容器的边缘等距：

|<-XXXXXXX->|
|<-XXXXXXX->|
|<-XXX      |

我怎样才能在纯CSS中做到这一点？

http://jsfiddle.net/e818rfum/

Answer 1

如果您真的想购买仅限CSS的解决方案，我建议您在单个项目+媒体查询中使用居中容器，以便在调整大小时调整此容器的宽度。

body {
    margin: 0;
}

.container {
    margin: 0 auto;
    background: #ddd;
}

@media (min-width: 110px) { .container { width: 110px; } }
@media (min-width: 220px) { .container { width: 220px; } }
@media (min-width: 330px) { .container { width: 330px; } }
@media (min-width: 440px) { .container { width: 440px; } }
@media (min-width: 550px) { .container { width: 550px; } }
@media (min-width: 660px) { .container { width: 660px; } }
@media (min-width: 770px) { .container { width: 770px; } }
@media (min-width: 880px) { .container { width: 880px; } }
@media (min-width: 990px) { .container { width: 990px; } }

.item {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.container:after {
    content: '';
    display: block;
    clear: left;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

您也可以在JSFiddle上访问此演示。

您可以使用项目边距或宽度的百分比值，而不是调整容器宽度的大小，从而导致左/右边距变化。它基本上是一个问题，你想在这里成为你的动态价值：

可变容器边距（见演示）
可变项目边距
可变项目宽度

只能通过CSS实现这一切。

Answer 2

不确定这是否是你想要的。这里的下行显然是对像素值的依赖。同时也从display: inline切换到float: left，以免不得不使用间隙和行高。

＆＃13;

.block{
    float:left;
    margin: 0 5px 5px 0;
    width:50px;
    height:50px;
    background-color: red;
}
.container{
    text-align:center;
    border: 1px solid blue;
    padding:5px;
}
.left{
    text-align:left;
    border: 1px solid green;
    margin: 0 auto;
    max-width: 220px; /* Max. four items per row, margins included */
    overflow: hidden; /* Cheap-skate clearfix */
    padding: 5px 0 0 5px;
}

＆＃13;

<div class="container">
    <div class="left">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

＆＃13;

（JSFiddle）

Answer 3

在放弃CSS之后，我把这个非常丑陋的jQuery一起扔到了我想做的事情上。如果只是为了澄清所期望的行为，请在此处发布。

function doLayout(){
        var canFitAcross = Math.floor($(".container").innerWidth()/$(".block").outerWidth(true));
        var reals = $(".container .block:not(.fake)").length;
        var fakes = $(".container .fake").length;
        if((reals+fakes)%canFitAcross!=0){
            $(".fake").remove();
            var neededFakes = canFitAcross-(reals%canFitAcross);
            if(neededFakes!=canFitAcross){
                for(var i=0;i<neededFakes;i++){
                    $(".container").append("<div class='block fake'></div>");
                }
            }

        }
    }

在这里，我完全废除了.left。在它的位置＆＃34;假＆＃34; （可见性：隐藏，不透明度：0.5用于演示目的）.block元素用于获得所需的左对齐。

在这里演示：http://jsfiddle.net/mgx37q5m/

仍然希望有某种CSS解决方案......

左对齐的div具有相等的水平边距

3 个答案: