css：如何左对齐内容的最后一行/行答案

【问题标题】：css: how to align left last line/row of contentcss：如何左对齐内容的最后一行/行
【发布时间】：2013-07-29 17:54:16
【问题描述】：

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

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

谢谢你

【问题讨论】：

使用 Flexbox 可能与您所能获得的一样接近，但即便如此，结果也不是很好：tinker.io/ce346。 Mozilla 确实有一个专有的 CSS 属性，专门用于定位最后一行的对齐方式，但我不知道它的名称是什么。
您可以通过在内容中添加几个空格来对齐最后一行：jsfiddle.net/zaBux/10。

标签： css alignment center

【解决方案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/

【讨论】：

我知道，因为我希望内容居中，但除了最后一行 - 它应该“适合网格”
@PuZ 见小提琴。如果每行没有固定数量的<div>s，您将无法使其居中。
我无法修复每行 div 的数量，因为整个布局可以调整大小，所以这个数字会动态变化

【解决方案2】：

在你的 CSS 中试试这个

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

【讨论】：

它不起作用，因为 :last-child 指的是最后一个元素而不是整行
.iB { display:inline-block; width: 50px; height: 50px; background: green; padding: 2%;float:left } 和边距玩

【解决方案3】：

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

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

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

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

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

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

【讨论】：

【解决方案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.

【讨论】：