html - 左、中、右三个 div 定位

Question

这个社区已经提供了很大的帮助。我有一个菜鸟问题。我确实进行了搜索，但没有发现这种情况，所以如果之前有人问过这个问题，我深表歉意。

我现在有一个“nav”div 位于包装 div 中。我的导航 div 中嵌套了三个子元素，我想将它们相应地定位在左侧、中间和右侧。我尝试 float 这三个元素，但它们都堆叠在一侧。我希望 Logo div 位于左侧，标题位于中间，电话号码位于右侧。

我知道这些可以通过绝对定位更精确地定位，但由于我试图保持布局尽可能流畅，还有其他方法吗？

这是我的 HTML

<div class="wrapper">
<div class="nav">
    <div class="logo"><em>BLI </em></div>
    <div class="header"><em>California's Leader in Workers' Compensation</em></div>
    <div class="phonenumber">Call us:<br>
    909-256-0525</div>    
</div>

还有我的 CSS:

.wrapper{
min-width:1200px;
position:relative;
width:100%;
overflow:auto;}

.nav{
color:#FFFFFF;
font-size:1.563em;
font-weight:bold;
float:left;
font-family: Arial;
background-color:#C7C2C2;
width:100%;
height:80px;
display:inline; 
}

.logo{
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
width: 50px;
color: #0E2B5E;
top: 9px;
clear: both;
float: left;
}

.header{
text-shadow:black 0.1em 0.1em 0.2em;
padding-top:40px;
clear:both;
width:300px;
text-align:center;
float:left;
}

.phonenumber{
text-shadow: black 0.1em 0.1em 0.2em;
float: left;
font-size: 1em;
padding: 5px;
}

任何通用的响应式设计技巧也将受到赞赏。 谢谢!

Answer 1

您可以在包装器上使用 display:table;，并在其所有子元素上使用 display:table-cell;。

这会将包装器 div 视为宽度为 100% 的表格元素，并将其所有子元素视为表格单元格。 (http://www.w3schools.com/cssref/pr_class_display.asp)

.wrapper{
 width: 100%;
 height:auto;
 display:table;
 background-color:gray;
}

.logo{
 display:table-cell;
 text-align:left;
 width:33%;
}

.header{
 display:table-cell;
 text-align:center;
 width:33%;
}

.phonenumber{
 display:table-cell;
 text-align:right;
 width:33%;
}

通过将包装器设置为 100%，将其子级设置为 33%，它现在也可以响应了!

我清除了您当前的样式，以便您更轻松地阅读。

fiddle :http://jsfiddle.net/mLmcfrup/