3

A common trick to evenly distribute blocks of content within a container is to give them a display:inline-block CSS property, and then apply text-align:justify to the parent container, so:

<section>
  <div></div><!-- repeat X times -->
</section>

And CSS:

section {
    text-align:justify;
}
div {
    width:200px;
    height:50px;
    display:inline-block;
}

This works fine in all browsers, including IE8+, as shown in this sample Fiddle. The last line reverts to left alignment since I didn't set text-align-last, which is fine, and unsupported by Webkit stable anyway.

However, if you now start generating additional div elements with Javascript, the layout engines somehow seem to completely forget about justification.

Refer to this second Fiddle which includes a periodical function adding a div every second. I have tested this in Chrome beta, Firefox latest, IE10 and IE11 - and all of them first screw up the last line completely, semi-justifying the generated content based on the previously available space, and then just left-aligning all following elements.

I have tried everything in Firebug and IE/Chrome dev tools, changing and resetting properties, but can't trigger a 'rejustification' in any way - they accept text-align:right, but if you then reset it to text-align:justify it just jumps back to left alignment again. Playing with white-space, letter-spacing and word-spacing just have no visible effect.

The relevant section in the W3 CSS standards provides no justification (pun intended) for this behaviour either as far as I can see.

Is there any fix or workaround for this issue?

4

1 回答 1

2

本质上，它需要每个 div 之间的空间，就像 HTML 中的那样。

所以做类似的事情（我不熟悉mootools，所以可能有更简单的方法）

(function(){
    $('root').grab(new Element('div'));
    $('root').grab(new Element('span', {
        'text': ' '
    }));
}).periodical(1000);

请参阅http://jsfiddle.net/AdLuT/1/ （在 FF 和 IE 中完美，在 Chrome 中略显不足，这表明那里存在不同的问题。）

于 2014-01-22T07:52:27.020 回答