Question

我想知道是否存在优雅方式来水平对齐3 divs 而不使用 float css property。

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布局 （另见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

Answer 2

添加到notulysses＆＃39; answer，如果古老的浏览器支持不是问题，您可以使用css3 Flexible_boxes。

通过应用display:flex，子div将水平对齐（默认情况下）

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

更多关于flexbox @ CSSTricks

这样可以避免使用inline-block元素

的空白问题

JSfiddle

Answer 3

#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}

Answer 4

您可以使用以下修复程序来调整问题＆＃34;而不是找到浮动的解决方法。（至少我认为是由它造成的）：

使用花车后，应始终清除浮子。您可以通过在课程中添加额外的<div>来完成此操作。

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

在CSS中：

.clear{
  clear: both;
}

Answer 5

使用下面的CSS样式：

#parent div{ display: inline-block; }

Working Fiddle

Answer 6

使用下面的CSS，您可以实现目标：

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Fiddle

水平对齐div而不浮动

6 个答案: