水平对齐div而不浮动 [英] Horizontally align div without float

问题描述

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

HTML： b
$ b

 < div id =parent> 
< div id =first>左< / div> 
< div id =second>中< / div> 
< div id =third>右< / div> 
< / div> 
  

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

解决方案

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

• （另请参阅 T J的回答

  #parent {display：flex; justify-content：空格; } 
  

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

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>

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

解决方案

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

• Flex layout (See also T J's answer):

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

JSFiddle

• 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 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屋！