CSS：水平对齐分区，而不浮 [英] CSS: Horizontally align div without float

问题描述

我想知道是否存在一个的优雅的方式，水平对齐3 的div 而不使用的 浮动 CSS属性。

I want to know if there exists an elegant way to horizontally align 3 divs without using float css property.

HTML：

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

我问这个问题，因为父 DIV 也没有浮动属性和添加浮法来的小孩会在页面大小调整问题。

I ask this question because the parent div has not float property and adding float to children cause problems on page resizing.

推荐答案

您可以使用显示：inline-block的或显示：表细胞的内部内容。

You can use display:inline-block or display:table-cell with the inner content.

表的布局：的

Table layout:

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

的jsfiddle

inline-block的布局：的

Inline-block layout :

#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

这篇关于CSS：水平对齐分区，而不浮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！