0

我有内容居中的 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/

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

谢谢你先进

4

4 回答 4

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/

于 2013-04-11T21:32:10.927 回答
0

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

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

  • 创建一个具有相同元素属性的新类，但高度为 0px
  • 在包装器的底部添加很多，以“填充”该行

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

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

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

于 2013-07-28T20:19:27.053 回答
0

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

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

现在我们有了一个设定的宽度，现在很容易将它居中margin: 0 auto

小提琴

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.
于 2013-07-28T21:31:25.463 回答
0

在你的 CSS 中试试这个

.iB:last-child{text-align:left}
于 2013-04-11T21:35:16.947 回答