水平对齐div，无浮点 [英] Horizontally align div without float

问题描述

我想知道是否有优雅的方式水平排列3 divs 而不使用 float css属性。

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

HTML： b
$ b

HTML:

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

我问这个问题，因为父 div 没有 float 属性并向子项添加 float 会导致页面调整大小出现问题。

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

推荐答案

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

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

• （另请参阅 T J的回答

• Flex layout (See also 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

• >

• 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

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