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给了我2px的vis和menu之间的差距，IE和Firefox将我的最后一个div vis放在新行中。页眉和页脚都没关系。我只是把它们放在你的电脑上就可以测试了。我想拥有%因为我希望它可以用于所有分辨率。

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/

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 就行了。

Answer 3

你的3个div的百分比加起来略高于100％，这可能会导致问题。尝试将左div的大小减小到72％

Answer 4

我认为您还应该为margin定义div#container（例如margin: 0;），使其在每个浏览器上都相同。当它没有定义时，浏览器使用默认值，它可以在各种浏览器上各种各样，然后你的精确宽度计算可能会失败。

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

4 个答案: