关于div宽度自适应的问题
我现在在学习div+css。刚刚学习到div宽度自适应，处于初级阶段。
我有个问题
<div style="width:80%">1111111</div> 这样的div是关于整个浏览器80%宽度的,但是把浏览器宽度拉到最小里边的字就会没有了
<div style="width:950px">11111111</div> 这样的div定死了宽度。浏览器缩小它也不随着动，所以里边的字用户一直能看见，但是整个页面显的特别死
我这几天看淘宝的页面，发现他有的div宽度一开始是根据浏览器的宽度在变，但是当浏览器宽度缩小到一定程度的时候，div就定宽了，不再随着浏览器的宽度继续变窄了。我想问下，这样的div样式是怎么实现的。
希望各位大侠帮助
我的意思是在同一浏览器下，拉伸浏览器的宽度，div会随着变化，但是到了一定程度，就定宽了。我是不知道这个是怎么实现的。。。而且能不用js就不用。。
设置一个div的固定宽度，然后外面用另外一个div进行包容，给外层div设置一个背景图片，让背景图片进行平铺，宽度自适应，设置它的外边距自适应。当显示器的分辨率大于你设置的宽度的时候，外层div会充满整个显示器，他就会自适应，当你拉动浏览器他的宽度小于你设置的内层div宽度时，div就出现定宽效果。
上面这段就是淘宝商城页面的现在基本原理，我不知道你要的是不是这个效果。
下面这段代码就是淘宝页面宽度自适应效果原来代码，把这段代码复制到你的dw中，预览一下，看看是不是你想要的效果。这里为了方便显示，我把div的高度都设死了，在实际操作中，高度可以自适应，在head center bottom 这三个最外层的div背景中，替换为可以沿x轴平铺的图片就成为了淘宝页面效果。
如有疑问可以发邮件联系我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
/*----------head-----------*/
.head{
height:200px;
background:#000;
}
.head_1{
width:950px;
height:150px;
margin:0px auto;
}
.head_1 div{
float:left;
}
.logo{
width:200px;
height:150px;
background:#999;
}
.logo_text{
width:750px;
height:150px;
background:#FFF;
}
.nav {
clear:left;
width:950px;
height:50px;
background:#F00;
margin:0px auto;
}
/*----------head-----------*/
/*-----------center----------*/
.center{
background:#333;
height:500px;
}
.center_all{
width:950px;
height:500px;
margin:0px auto;
}
.center_left{
width:200px;
height:500px;
background:#666;
float:left;
}
.center_right{
width:740px;
float:right;
height:500px;
background:#000;
}
/*-----------center----------*/
/*----------bottom---------*/
.bottom{
height:100px;
background:#000;
}
.bottom_menu{
width:950px;
height:100px;
margin:0px auto;
background:#900;
}
/*----------bottom---------*/
</style>
</head>
<body>
<div class="head">
<div class="head_1">
<div class="logo">logo</div>
<div class="logo_text">logo text</div>
</div>
<div class="nav">nav</div>
</div>
<div class="center">
<div class="center_all">
<div class="center_left">center left</div>
<div class="center_right">center right</div>
</div>
</div>
<div class="bottom">
<div class="bottom_menu"></div>
</div>
</body>
</html>
把这段代码复制到你的dw中，预览一下，看看是不是你想要的效果。
height:30px;
float:left;
width:120px;【这里要指定宽度】
background:
url(iconem.gif)
repeat-x;
}
另外，如果元素设置为浮动后应设置其宽度，否则其宽度会随内容的多少而改变（当然如果你是想要这中效果另当别论）
CSS中有一项 min-width 是用来设定最小宽度值的，源自于Firefox吧我记得。使用方法,例如：width:100%;min-width:800px;这样就会实现你要的效果。高度也同理。
加油喽
ceshi.html
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>javascript判断浏览器分辨率调用不同css样式实例</title>
<link rel="stylesheet" rev="stylesheet" id="skin" type="text/css" media="all" />
<script LANGUAGE="JavaScript">
var axu_url800x600="1.css"; //设置变量axu_url800x600 样式：1.css
var axu_url1280x1024="2.css"; //设置变量axu_url1024x768 样式：2.css
if((screen.width==800)&&(screen.height==600))
document.getElementById("skin").href=axu_url800x600; //判断分辨率是800x600调用1.css
else if((screen.width==1280)&&(screen.height==1024))
document.getElementById("skin").href=axu_url1280x1024; //判断分辨率是1024x768调用2.css
else document.getElementById("skin").href=axu_url1280x1024; //否则 调用2.css
</script>
</head>
<body>
<div class="ceshi">1111</div>
</body>
</html>
1.css
--------------
.ceshi{ width:200px; border:solid 1px #000;}
2.css
----------------
.ceshi{ width:80%; border:solid 1px #000;}
把上边的这3个文件保存在同一个目录下
用800*600的分辨率和1280*1024的分辨率看看效果本回答被提问者采纳
如何设置div的宽高自适应屏幕大小
网页里面的宽度是可以用百分比决定的，可以设置这个容器的宽度占屏幕宽度的百分之多少，但是因为百分比的宽度是要有参考对象的，所以在设置百分比的宽度时，要先设置body的宽度为100%。照你的要求：一屏分为两栏显示，那么用两个DIV来做，一个DIV的宽度就是50%，两个在一起就正好100%了，如果你想这两...
如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐...
1、HTML的div标签主要是用来布局，div默认是没有任何属性的这也是常用它布局的原因。2、主要设置两个div，一个div在外一个div在内，并设置div的边框颜色。3、首先打开页面，具体如下图所示。4、F12打开审查元素，修改内层div的宽度，外层div随着边框。5、修改内层div高度，外层div高度随之改变。6、div...
如何让div的宽度不超过高度
1、使用CSS的aspect-ratio属性：设置div的aspect-ratio属性为1，这样可以确保宽度和高度的比例保持一致，从而不会出现宽度超过高度的情况。2、使用CSS的max-width属性：设置div的max-width属性为100%，同时设置height：auto，这样可以确保宽度不会超过父容器，并且高度自适应。
div如何自适应屏幕div自适应屏幕宽度
6、先使用【margin-left:-200px;】“-200px”这个数值自然就是DIV宽width:400px;的一半，并添加为负值。保存后刷新网页可以看到DIV已经左右居中了。7、可以看到不管我们把页面变成什么尺寸，DIV都会自动居中，是不是解决你的问题了呢？以上就是DW让DIV模块在页面中相对屏幕自动居中的教程。p盒子自适应...
怎样使子div自适应父div的大小
. }来进行调节。3、但是window.onresize = function() { ... }图表只能根据窗体的大小变化。4、[removed][removed] $(".index_m").resize(function(){echarts.init(document.getElementById('imeter_1')).resize(); } 之后图表便可以根据div的变化来自适应。5、如图所示即完成了自适应。
如何给div设置最小宽度,如果超出宽度自适应
一个div容器，如果给这个容器设置一个最小宽度，如果内容没有超出就是这个最小宽度，如果超出了容器就会自动适应内容的宽度
echarts图表切换自适应div的宽度技巧
为解决图表自适应问题，首先需要在右侧地区展开时，给中间内容容器增加`margin-right:240px`样式，同时根据需求切换柱状图与折线图的显示。当右侧地区收起时，图表宽度应自动适应主内容的宽度，确保视图始终清晰且不拥挤。以下是实现自适应的关键步骤与代码片段：1. **定义图表数组**：确保在图表初始化时，...
div设置宽高(div默认宽度)
给宽度的时候都按照%的形式~就会实现自适应缩放~根据浏览器的大小打开~设置div高度 你设置了菜单的div为固定后， 再下面的div你需要margin-top:菜单div的高度。div默认宽高 一、首先，我们先设计一个div，并且给这个div添加一个id，id名随意取。然后设置一下宽高，并且添加一个红色的背景属性值。默认...
网页的div宽度如何适应不用分辨率的显示器?
而你上面也说到了窗口缩小页面就变形了，那就说明你的页面应该是全部用了 float:left;并且固定每个标签的宽度来布局的，这种布局方式虽然代码简洁，但是要求整个页面的框架宽度要固定，否则要自适应分辨率来调整宽度，那页面布局会很容易错乱；要解决这一问题也比较简单，就比如处于同一行的3个div，你可以...
网页宽度跟随电脑屏幕分辨率自动适应,那么它里面的div能不能设置...
DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。使用CSS单词与语法 1.代码如下:media screen and (判断属性){ CSS...
