html – 水平对齐没有float的div

参见英文答案 > How align 2 adjacent divs horizontally WITHOUT float?5个
我想知道是否存在一个优雅的方式来水平对齐3个div,而不使用float css属性.

HTML：

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

我问这个问题是因为父div没有float属性,并且向子节点添加float会导致页面调整大小的问题.

解决方法

您可以使用display：inline-block或display：table-cell与内部内容.

> Flex布局(参见T J’s answer)：

#parent{ display:flex; justify-content: space-between; }

JSFiddle

>表布局：

#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

>内嵌块布局：

#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; }

JSFiddle