定位三个 div 左、中、右

Question

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

我有一个“导航”div 当前位于包装 div 中。嵌套在我的导航 div 中的是三个子元素，我想相应地定位它们的左侧、中心和右侧。我尝试浮动这三个元素，但它们都堆叠在一侧。我想要左边的 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%，它现在也响应了！

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

小提琴：http://jsfiddle.net/mLmcfrup/

Answer 2

在这里我可以解决您的问题，它是完全响应式 css 代码，它适用于所有浏览器并根据浏览器大小更改宽度。它可用于移动设备、PC 和其他分辨率。我希望它对你有帮助。

Live Working Demo

HTML 代码：

<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>

CSS 代码：

.main
{
    width:100%;
    position:relative;
}

.left
{
    width:20%;
    float:left;
    position:relative;
    background-color:red;
}
.middle
{
    width:60%;
    float:left;
    position:relative;
    background-color:green;
}
.right
{
    width:20%;
    float:left;
    position:relative;
    background-color:blue;
}

结果：

Answer 3

要并排放置内部 div 并使其保持流畅，请使用 css display 属性 table 和 table-cell。

.nav {
    display: table;
    width: 100%;
}

.nav > div {
    display: table-cell;
}

删除所有的浮动和东西，让nav 像一张桌子一样工作，像内联单元格一样并排放置它的孩子...

这是一个简单的例子说明它是如何工作的（没有你所有的样式）：http://jsfiddle.net/1co0qLx9/

Answer 4

这里有 2 个您关心的最佳解决方案。

我根据您的代码创建了 2 个流畅的布局。

首先带有“浮动”，以便您可以轻松关联并快速实施。

网址：-http://sandeepparashar.com/stackoverflow/fluid-layout-with-float.html

Second 使用“box-flex”。因为 float 已经过时了，您将有机会了解新的 CSS3 属性。 box flex 也没有宽度限制。

网址：-http://sandeepparashar.com/stackoverflow/fluid-layout-with-box-flex.html

带有浮动布局的 CSS 代码：

.wrapper {}
.nav {
    width:100%;
    vertical-align:middle;
    box-sizing:border-box;
    color: #FFFFFF;
    font-size: 1.563em;
    font-weight: bold;
    font-family: Arial;
    background-color: #C7C2C2;
    height: 80px;
}

.logo {
    font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    font-weight: bold;
    font-size: 2em;
    color: #0E2B5E;
    float:left;
    width:100px;
    padding-top:10px;
}
.header {   
    text-shadow: black 0.1em 0.1em 0.2em;
    text-align: center;
    margin:0 200px 0 100px;
    padding-top:25px;
}
.phonenumber {
    text-shadow: black 0.1em 0.1em 0.2em;
    font-size: 1em;
    padding: 5px;
    float:right;
    width:200px;    
    padding-top:10px;
}

HTML DIV 位置随浮动布局而变化：

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

  </div>
</div>

带有 Box Flex 布局的 CSS3 代码：

.wrapper {}
.nav {
    display:box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-moz-box;

    box-orient:horizontal;
    -webkit-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -moz-box-orient:horizontal;

    -webkit-box-align:center;
    -ms-flex-align:center;
    -moz-box-align:center;

    width:100%;
    vertical-align:middle;
    box-sizing:border-box;
    color: #FFFFFF;
    font-size: 1.563em;
    font-weight: bold;
    font-family: Arial;
    background-color: #C7C2C2;
    height: 80px;
}

.logo {
    font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    font-weight: bold;
    font-size: 2em;
    color: #0E2B5E;
}
.header {
    box-flex:1;
    -webkit-box-flex:1;
    -ms-flex:1;
    -moz-box-flex:1;
    display:block;

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

如果需要更多帮助，欢迎您:)