0

Just curious as to why text-align: justify doesn't work with a child block element?

Here is my html:

<div class="parent">
   <div class="inline-child"></div>
   <div class="inline-child"></div>
   <div class="inline-child"></div>
   <div class="block-child"></div>
</div>

Here is my css:

.parent {
    width: 100%;
    background: black;
    text-align: justify;
}

.inline-child {
    display: inline-block;
    vertical-align: top;
    height: 100px;
    width: 30%;
    background: red;
}

.block-child {
    /* display: inline-block;
    width: 100%; */
}

At this point, the code doesn't work, but if I make the block-child inline, justify works. Why? http://jsfiddle.net/aLv8dp2z/1/

Allen
  • 3,601
  • 10
  • 40
  • 59

0 Answers0