如何设置三个div以适应屏幕宽度

Question

大家好，我遇到了一个关于HTML中div的问题。在Chrome中我已经正确设置了它们，但是当我在Firefox或IE中使用时，我的最后一个div会跑到下一行。

这是我的代码：

<div id="container">
    <div id="header"></div>
    <div id="left"></div>
    <div id="menu"></div>
    <div id="vis"></div>
    <div id="footer"></div>
<div>

他们的 CSS 代码如下：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#vis
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}
#container
 {
 width:98%;
 padding-left:1%;
 padding-right:1%;
 }
#header
 {
 background-color:#4671D5;
 -moz-border-radius-topleft: 100px 50px;
  border-top-left-radius: 100px 50px;
  -moz-border-radius-topright: 100px 50px;
  border-top-right-radius: 100px 50px;
 }

如何使这些div在其他浏览器中也完美地适应彼此？ Chrome正是我需要的。 Safari在vis和menu之间给我留下了2px的间隙，而IE和Firefox将我的最后一个div vis放在了新行中。页眉和页脚没问题。我只是把它们放在这里让您在您的计算机上测试。我希望使用%，因为我希望这适用于所有分辨率。

- user123_456

Answer 1

将菜单CSS更改为

#menu 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.1%;//previos 15.25% 
float:left; 
margin:0; 
} 

工作演示 http://jsfiddle.net/J5fVj/2/

- user1432124

---

这个解决了你的问题吗？你可能需要测试一下，因为当我测试时，你的div仍然换行了。我在这里提供了解决方案：http://jsfiddle.net/J5fVj/ - Dexter Huinda

Answer 2

解决方案在这里：http://jsfiddle.net/J5fVj/

• 不再换行
• div之间没有空格

HTML：（带有用于测试的示例文本）

<div id="container">
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="menu">menu</div>
    <div id="vis">vis</div>
    <div id="footer"></div>
<div>​

更新的样式表：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
display: inline-block;
}
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
display: inline-block;
margin:0;
}
#vis
{
 background-color:#D4EAE4;
 display: inline-block;
 width:11%;
 height:570px;
 margin:0;
    border-left: 1px solid #d0d0d0;
}
#container
 {
 width:98%;
 padding-left:1%;
 padding-right:1%;
 white-space: nowrap;
 font-size: 0;
 }
#header
 {
 background-color:#4671D5;
 -moz-border-radius-topleft: 100px 50px;
  border-top-left-radius: 100px 50px;
  -moz-border-radius-topright: 100px 50px;
  border-top-right-radius: 100px 50px;
}

#header, #left, #menu, #vis { font-size: 20px; text-align: center; }

通过设置 white-space: nowrap, font-size: 0, display: inline-blocks 解决了问题。

- Dexter Huinda

---

你的答案在这里是最好的 :) - a1204773

Answer 3

你的三个 div 的百分比加起来略微超过了 100%，这可能会导致问题。尝试将左侧 div 的大小减小到 72%。

- Gaz Winter

---

然后在右侧，我的页脚和页眉有间隙问题。你能否尝试使用这段代码快速制作HTML页面？这样你就可以看到问题出在哪里了。 - user123_456

很遗憾，我现在正在工作，无法进行翻译。但问题肯定与百分比有关，你只需要稍微调整一下它们就可以了。 - Gaz Winter

当每个 div 之间有空格时，文本内容将自动换行。解决方案是声明 white-space: nowrap; 可以关闭自动换行。 - Dexter Huinda

Answer 4

我认为你还应该为 div#container 定义 margin（例如margin: 0;），使每个浏览器上的值相同。如果没有定义，浏览器将使用默认值，而这可能在不同的浏览器上是不同的，然后你精确的宽度计算可能会失败。

- psur