html - Container with justified text-align in IE -


i have 3 divs have fixed widths. goal align these 3 divs horizontally equal spacing between each. have found best solution far use container "text-align: justify" seen in tutorial: http://www.barrelny.com/blog/text-align-justify-and-rwd/.

this method place equal space between 3 divs, regardless of other factors. i've used technique , feel far superior using floats. problem, however, doesn't appear working in ie 11 , down.

i minimize html, put "&nbsp" between each div:

<div class="block-container">     <div class="block"></div>&nbsp;     <div class="block"></div>&nbsp;     <div class="block"></div> </div> 

the "block-container" has these styles applied make work:

max-width: 1100px; text-align: justify; &:after{     content: '';     display: inline-block;     width: 100%;     height: 0;     font-size:0;     line-height:0; } 

in every browser except ie, works fine. have ability vertically align each div using "vertical-align: middle". in ie, however, divs placed next each other , not justified in container. there way ie interpret "text-align: justify" or "nbsp" differently?

i figured out answer justify grid's documentation: http://justifygrid.com/. trick use "text-justify: distribute-all-lines;" on container element fix in ie. recommend people adopt method on floats if want support ie9. otherwise switch flexbox.


Comments

Popular posts from this blog

html - Difficulties with background-image property -

visual studio code - What does the isShellCommand property actually do and how should you use it? -

ios - Segue not passing data between ViewControllers -