text-align: justify + left

Question

I have a code like this: HTML:

<div id="container">
    <div>some</div>
    <div>text</div>
    <div>here</div>
    <div>...</div>
</div>
<div id="container">
    <div>some</div>
    <div>text</div>
</div>

and CSS:

#container {
    text-align: justify;
}

#container:after {
    content: "";
    display: inline-block;
    width: 100%;
}

#container > div {
    text-align: left;
    display: inline-block;
    width: 100px;
    background-color: #333;
    color: white;
}

http://jsfiddle.net/1odgx6vq/

I need the blocks to be justified, because they have fixed width, but I need to "align left" in the second container. Is there a way to do this? Thanks for replies.

EDIT: I tried to fix it with JS by adding an element with inherited background, that works when I add it manually in HTML code, but with JS it doesn't re-align, demo:

http://jsfiddle.net/1odgx6vq/1/

Answer 1

通过在添加javascript的元素之前和之后添加空格来解决