Question

这个社区已经有了很大的帮助。我有一个noob问题。我确实做过搜索，但没有出现这种情况，所以如果之前有人问过，请道歉。

我有一个“nav”div目前坐在一个包装div中。嵌套在我的nav div中的是三个子元素，我想要相应地左，中，右定位。我试过浮动这三个元素，但它们都堆叠在一边。我想左侧的标识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代码，它适用于所有浏览器，并根据浏览器大小更改宽度。它可用于移动，电脑和其他分辨率。我希望它对你有所帮助。

<强> 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;
}

<强>结果：

result

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个流畅的布局。

首先与＆＃34;浮动＆＃34;这样你就可以很容易地快速联系和实施。

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

使用＆＃34; box-flex＆＃34;

第二次。 Becasue 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;
}

如果需要更多帮助，请最欢迎：）

定位三个div左，中，右

4 个答案:

以下是您关心的2个最佳解决方案。