Question

关于html跟css的问题

你好：这是两个div,在分辨率大的情况下出现上边的那个样式，当分辨率小的时候就会被挤下了，挤下了以后被挤的那个就会自动铺满，求解答！谢谢。。。。。

Answer 1

应该设置div的宽度

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

一种设置div宽度为百分比,css如下

#container{width:100%;}

#left,#right{width:50%;float:left;}

这种可以根据屏幕大小自动调整div的大小, 适合传统的业务软件的页面

还可以直接设置div的宽度,不随屏幕大小变化

#container{width:960px;magin:0 auto;}

#left,#right{width:480px;float:left;}

这种默认宽度为960, 1024*768分辨率及以上都会没有问题的

现在大部分网站都是这么处理的,这么做的好处是div的内容不会随着屏幕变化而变化

屏幕在960以上, div会居中显示的,两边是空白, 你看下现在的网站都是这么处理的.

追问

第一种方法，第二种方法虽然分辨率会被挤下了，但被挤下来的div不会变成100%宽度的显示！！举个例子，就是没被挤下来的时候是30%，显示的话，被挤下来，就变成100%，显示，不能用脚本语言！

追答

这两种方法是不会被挤下的,因为已经设置了浮动和宽度
div宽度默认是父节点的宽度的
挤下来的话就是100%了,
如果想要并排在一起, 就需要浮动和设置宽度才行
另:你的需求是什么?想实现什么效果

追问

就是想实现我说的那种效果，这是一个不一般的网页，需要特殊的效果，一般看来是错误，但是这个网页就是要这种错误，可以简单的理解为就是div被挤下来和不被挤下来有两个宽度！

Answer 2

这个要写两个样式文件,,然后用js对分辨率进行判断,,对应不同的分辨率调用不同的样式文件实现你想要的不同效果~~

<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>

注：上面的js用来判断分辨率~~~

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

追问

虽然你写的很多，但是这个是html跟css实现的，不让用脚本语言，对于你也这么多真的好抱歉！！！！

Answer 3

这种情况的话就不能设置div的宽度为精确数值，而应该是相对的数字，相对于整个屏幕宽度为50%，就不会出现你说的情况了

追问

这是个特殊的网站，就是为了让他出现那种效果，而不是为了避免！！谢谢！！

Answer 4

应该设置div的宽度＆lt；div　id＝＆quot；container＆quot；＆gt；　　　　＆lt；div　id＝＆quot；left＆quot；＆gt；＆lt；＆＃47；div＆gt；　　　　＆lt；div　id＝＆quot；right＆quot；＆gt；＆lt；＆＃47；div＆gt；＆lt；＆＃47；div＆gt；一种设置div宽度为百分比css如下＃container｛width：100％；｝＃leftqvxb＃right｛width：50％；float：left；｝这种可以根据屏幕大小自动调整div的大小，　适合传统的业务软件的页面还可以直接设置div的宽度，不随屏幕大小变化＃container｛width：960px；magin：0　auto；｝＃left，＃right｛width：480px；float：left；｝这种默认宽度为960，　1024＊768分辨率及以上都会没有问题的现在大部分网站都是这么处理的，这么做的好处是div的内容不会随着屏幕变化而变化屏幕在960以上，　div会居中显示的，两边是空白，　你看下现在的网站都是这么处理的．

追问

这是给特殊的网站，就是为了让他出现这种效果，这个网站不是一般的网站布局！！！