使用CSS证明最后一行文本的合理性

我有一个CSS助手类，它的设计目的是强制最后一行“text”（或者在预期用途中，内联块div）与其他行对齐

以下是我得到的代码：

.justify-all-lines
{
    text-align: justify;
    /* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.justify-all-lines > *:last-child:after
{
    display: inline-block;
    width: 100%;
    content: 'hello';
}

.blocky
{
    display: inline-block;
    /* Make inline block work in IE 6/7 */
    zoom: 1;
    *display: inline;
}

其用途如下：

<div class="justify-all-lines">
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
</div>

这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。
这里有东西。

---

但是，我看到“hello”出现在最后一个“blocky”div中，而不是在最后一个“blocky”div之后。我做错了什么？

工作解决方案：

.justify-all-lines
{
    /* This element will need layout for the text-justify
     * to take effect in IE7 (and possibly previous versions);
     * this will force it, for more info Google "hasLayout in IE"
     */
    overflow: hidden;
    text-align: justify;

    /* For IE6 to IE7 since they don't support :after */
    -ms-text-justify: distribute-all-lines; /* IE8+ */
    text-justify: distribute-all-lines; /* IE5+ */
}

.justify-all-lines:after
{
    /*
     * We don't need IE6 and IE7 inline-block hack support here
     * since they don't support :after anyways (the text-justify
     * properties for them are above)... IE8 and above have native
     * inline-block support so for IE8+, both the text-justify and
     * :after will take effect but it doesn't have any negative
     * effects since this element is invisible
     */
    display: inline-block;
    width: 100%;
    content: '.';
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

---

.justify all line>*：最后一个子项：在{/*stuff for IE6/7*/}

之后是奇数。IE6不支持

，IE6/7也不支持

:last child

或

:after

。您目前正在测试哪些浏览器？你能做一个演示来说明这个问题吗？@thirtydot我使用的是dotless（），这只是一个复制粘贴异常，因为为了这篇文章，我将mixin转换为内联CSS。我想更多的人会比更少的人熟悉简单的CSS。我会修好的“我看到‘你好’出现在最后一部‘blocky’div中”-应该是这样的。它不会创建新元素，但（至少显然）会将内容附加到指定的元素。在IE7中似乎不起作用，但我的解决方案也不起作用（除非我在链接的答案中对其进行了调整）。嗯，同样的代码可以在我的站点上使用，但不能在JSFIDLE中使用。我想知道它是否对CSS做了些什么……IE5中添加了文本对齐，IE8中添加了-ms文本对齐，所以它肯定可以正常工作……hasLayout！hasLayout！！显然，

.justify all line

需要布局才能使

文本justify

正常工作。我在我的网站的CSS中有

overflow:hidden

，这触发了hasLayout，但在JSFIDLE中没有。这就解释了。非常感谢你指出这一点，因为我不会注意到的！工作JSIDLE链接：