Question

我有div的中心内容 - 一个图像，但问题是最后一行也是居中的，它打破了“网格效应”

    <div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

.wrapper {
    width: 100%;
    background: red;
    text-align: center;
}


.iB {
    display:inline-block;
    width: 50px;
    height: 50px;
    background: green;
    padding: 2%;
}

演示：http://jsfiddle.net/puz219/zaBux/

如何将最后一行/行对齐到左边？

先谢谢你

Answer 1

由text-align: center引起。在.wrapper。

CSS：

.wrapper {
    width: calc(100%-10px);
    background: red;
    padding: 5px;
}


.iB {
    display:inline-block;
    margin: 2px;
    width: 50px;
    height: 50px;
    background: green;
    padding: 2%;
}

如果您需要在IE中工作，请将calc(100%-10px)更改为100%。演示：http://jsfiddle.net/zaBux/4/

Answer 2

在你的css中尝试这个

.iB:last-child{text-align:left}

Answer 3

实际上，你不能用实际的CSS规范。

但是有一种hacky方式，适用于所有浏览器：

使用相同的元素属性创建一个新类，但高度为0px
在您的包装器底部添加大量内容，以“填充”该行

我更新你的小提琴：http://jsfiddle.net/zaBux/9/，它正在工作（也许你需要添加更多div元素来覆盖大宽度屏幕）

将来，您只能使用CSS，使用多个:after伪选择器（http://www.w3.org/TR/css3-content/#inserting0）

W3C指定了第一行选择器，但还没有指定最后一行选择器

Answer 4

您需要使用大量媒体查询才能使其正常运行。

我们在每个屏幕宽度处对包装div应用宽度，该宽度可以容纳一个额外的框

现在我们有一个设定的宽度，现在很容易将其与margin: 0 auto

对齐

<强> FIDDLE

CSS

.wrapper {
    width: 100%;
    background: red;
    margin: 0 auto;
    overflow:hidden;
}


.iB {
    float:left;
    width: 50px;
    height: 50px;
    background: green;
    margin: 10px;
}
@media (max-width: 70px) { /* 70 = 50 + 10 + 10 (left and right margins) */
    .wrapper{
        width: 70px;
    }
}
@media (min-width: 140px) {
    .wrapper{
        width: 140px;
    }
}
@media (min-width: 210px) {
    .wrapper{
        width: 210px;
    }
}
etc etc.

css：如何对齐左上一行/内容行

4 个答案:

CSS