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

大家好我有我的div在html中的问题。我已经在Chrome中正确设置了它们，但是当我使用Firefox或IE时，我的最后一个div将在下一行中进行。如何设置3个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正在将我的最后一个分区vis放在新的一行中。页眉和页脚都可以。我只是把它们放在你的电脑上测试它。我想要%，因为我希望这可以用于所有分辨率。

来源

2012-06-19 user123_456

更改菜单css来

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

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

来源

2012-06-19 08:13:04

就是这样:)正是我需要的！我可以在5分钟内接受。 –

这是否解决您的问题？您可能需要测试，因为当我测试它时，您的div仍然会封闭。我在这里有解决方案：http://jsfiddle.net/J5fVj/ –

在我的答案下面看到工作代码的副本。 –

您的3个div的百分比加起来可能略微超过100％，这可能会导致问题。尝试减少左div的大小到72％

来源

2012-06-19 08:11:00

然后在右侧我遇到了页脚和页眉的问题我有空隙。你可以尝试使用此代码制作快速html页面吗？所以你可以看到什么是错的请 –

可悲的是我不能工作。但问题肯定会与百分比有关，你只需要稍微调整一下。 –

当白色空格围绕每个div分隔时，将始终发生包装。这里唯一的解决方法是声明'white-space：nowrap;'关闭包装。 –

我想你也应该定义margin为div#container（如margin: 0;）是每个浏览器都一样。当它没有被定义时，浏览器使用默认值，并且它可以在各种浏览器上变化，然后您的精确宽度计算可能失败。

来源

2012-06-19 08:18:18 psur

解决方案是在这里：在div之间出现http://jsfiddle.net/J5fVj/

没有更多的包装
没有更多的空间

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

的空白：NOWRAP，字体大小：0，显示：直列块确实起作用。

来源

2012-06-19 08:43:50

你的回答是最好的:) – a1204773

@Loclip谢谢:) –

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

回答

相关问题