关于div css网站结构问题

显示全部楼层 · 2011-2-17 01:10:13

我的网站分上-中（左右）-下结构
默认宽度是自适应游览器，最小宽度暂定设为1002PX
头部和尾部没什么疑问
关键是中部的左右结构
左边是常规的菜单，固定宽度，右边是内容。
简单举例：
div id=\\\"main\\\" style=\\\"clear: both;width: auto;min-width: 1002px;\\\"
div id=\\\"left\\\" style=\\\"width:200px;\\\"左边内容/div
div id=\\\"right\\\" style=\\\"position: relative;
width:auto;
min-width: 760px;
float: left;
display: inline;\\\"右边内容/div
/div

当前浏览器默认1280分辨率，页面自适应，右边内容宽度大致（1280-200）px
在IE7以上版本，拉窄浏览器，整个页面会自适应缩小，一直缩小到1002px宽，再拉窄，页面内容不在变窄；右边内容页面会自适应缩小。效果相当于都变窄了，但是页面结构没变。

但是火狐的话，整个页面是会自适应缩小到1002px宽，右边浮动内容却不会缩小；以至于右边内容换行了。rightDiv在leftDiv下面了。

该怎么写整体结构样式，能让右边的内容不会换行！！！！！！！！！！！！！！！！！！！！！！

千问 · 2011-2-17 01:10:13

<pre id=\\\"best-answer-content\\\">我一般用浮动，不改变display
你尝试把宽度都固定为某个值，但和要小于1002试一下
style
.w1002{width:1002px}
.w200{width:200px;} /* 不考虑IE6 */
.w760{min-width:760px;} / * 不考虑IE6 */
.clear{height:1%;overflow:hidden} /* 清除浮动 */
.float{float:left}
/style
div class=\\\"head\\\"/div
div class=\\\"body w1002 clear\\\"

div class=\\\"left w200 float\\\"/div

div class=\\\"right w760 float\\\"/div
/div
div class=\\\"foot\\\"/div
我一般这么用，没测试，有问题再问我

千问 · 2011-2-17 01:10:13

<pre class=\\\"answer-content\\\">最好不要默认宽度，要定死宽度，这样你中间的两个div 就能定下宽度。
各浏览器也就能兼容！

千问 · 2011-2-17 01:10:13

<pre class=\\\"answer-content\\\">这个问题样式已无法很好解决，需要使用JS

千问 · 2011-2-17 01:10:13

<pre class=\\\"answer-content\\\">给你随便写了一个，为了让你看的更明白，把右边的div设的高度跟左边不一样
如果想控制右边div与左边div之间的间距，可以设置margin-left:220px;这个值显示的间距就是20px
提醒一下，min-width这个属性兼容性不太好，IE6是不支持的，各个版本显示的效果也有点不一样

div style=\\\" min-width:1002px; border:1px solid red\\\"
div id=\\\"main\\\" style=\\\" clear:both; height:100px; background-color:#000;\\\"/div
div id=\\\"left\\\" style=\\\" float:left;width:200px; height:100px; background-color:#666666\\\"左边内容/div
div id=\\\"right\\\" style=\\\" overflow:hidden; height:120px; background-color:#009933\\\"右边内容/div
/div

有时候左边和右边两个东西可以通过table来弄，在一个div内插入table，左边内容放入固定宽度的td内，右边的则会自动撑最大，看下面的例子
div style=\\\" min-width:1002px; border:1px solid red\\\"
div id=\\\"main\\\" style=\\\" clear:both; height:100px; background-color:#000;\\\"/div
div id=\\\"content\\\"
table border=\\\"0\\\" cellpadding=\\\"0\\\" cellspacing=\\\"0\\\" width=\\\"100%\\\"

tr
td style=\\\"width:200px;\\\"
div style=\\\" height:100px; background-color:#666666\\\"左边内容/div
/td
td
div style= \\\"height:100px; background-color:#009933;\\\"右边内容/div
/td
/tr
/table
/div
/div

千问 · 2011-2-17 01:10:13

<pre class=\\\"answer-content\\\">不用JS ，不考虑IE6，如下代码，成功解决：
!DOCTYPE html PUBLIC \\\"-//W3C//DTD XHTML 1.0 Transitional//EN\\\" \\\"<a href=\\\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\\" target=\\\"_blank\\\">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>\\\"
html xmlns=\\\"<a href=\\\"http://www.w3.org/1999/xhtml\\\" target=\\\"_blank\\\">http://www.w3.org/1999/xhtml</a>\\\"
head
meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset=utf-8\\\" /
meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=EmulateIE7\\\"/
titleTitle/title
style type=\\\"text/css\\\"
*{margin:0;padding:0;font-family:arial;font-size:12px;}
.clear{clear:both;}
#header{height:100px;background:#fc0;min-width:960px;}
#container{margin:10px 0;min-width:960px;}
#container .left{height:400px;width:200px;background:#ccc;float:left;}
#container .right{background:#f00;margin-left:210px;min-width:750px;}
#footer{height:100px;background:#cc0;min-width:960px;}
/style
/head
body
div id=\\\"header\\\"/div
div id=\\\"container\\\"
div class=\\\"left\\\"/div
div class=\\\"right\\\"文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明/div
div class=\\\"clear\\\"/div
/div
div id=\\\"footer\\\"/div
/body
/html