如何在没有显示的情况下，将div均匀地分布到从左到右的行方向的页面内容上:flex

Question

我希望div从左到右，并且均匀分布在宽度:100%;

这可以在CSS中完成，而不使用任何JS或Display:Flex，它实际上允许你使用Flex -direction ....但它不兼容IE8和IE9!

#container {
    width: 100%;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#container:after {
	content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
div {
    width: 27%;
    display: inline-block;
    zoom: 1;
    position: relative;
    background-color:lightblue;
    text-align:center;
    color:red;
    height:100px;
    border:1px solid black;
    margin: 10px;
}
p { 
    maring:0;
    padding:0;
    line-height:80px
}

<div id="container">
    <div><p>A</p></div>
    <div><p>B</p></div>
    <div><p>C</p></div>
    <div><p>D</p></div>
    <div><p>E</p></div>
    <div><p>F</p></div>
    <div><p>G</p></div>
    <div><p>H</p></div>
</div>

这是我的代码。

所以基本上…第一个div总是在左边，第三个总是在右边，中间的一个。但每次添加新div时都应该从左向右添加。Not left> right> middle

已经有@Sofiene DJEBALI的正确答案了

Answer 1

添加font - family:宋体;到CSS中的div:

    div {
    width: 30%;
    display: inline-block;
    zoom: 1;
    position: relative;
    background-color:lightblue;
    text-align:center;
    color:red;
    height:100px;
    border:1px solid black;
    margin: 10px;
    float:left;
}

https://jsfiddle.net/bvgn46hu/28/