水平对齐div而不浮动

Question

我想知道是否存在一种优雅的方法来水平对齐3 divs 而不使用 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到子节点会导致页面大小调整问题.

Answer 1

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

• Flex布局(另见TJ的答案):

#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

Answer 2

添加到notulysses的答案,如果古老的浏览器支持不是问题,您可以使用css3 Flexible_boxes.

通过应用display:flex子div将水平对齐(默认情况下)

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

更多关于flexbox @ CSSTricks的信息

这将避免元素的空白问题inline-block

的jsfiddle