参见英文答案 >
How align 2 adjacent divs horizontally WITHOUT float?5个
我想知道是否存在一个优雅的方式来水平对齐3个div,而不使用float css属性.
我想知道是否存在一个优雅的方式来水平对齐3个div,而不使用float css属性.
HTML：
<div id="parent"> <div id="first">Left</div> <div id="second">Middle</div> <div id="third">Right</div> </div>
解决方法
您可以使用display：inline-block或display：table-cell与内部内容.
> Flex布局(参见T J’s answer)：
#parent{ display:flex; justify-content: space-between; }
>表布局：
#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }
>内嵌块布局：
#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }
