关于div宽度自适应的问题

2024-12-03 16:27:49
推荐回答(4个)
回答1:

其实很简单,根本就用不上js。

设置一个div的固定宽度,然后外面用另外一个div进行包容,给外层div设置一个背景图片,让背景图片进行平铺,宽度自适应,设置它的外边距自适应。当显示器的分辨率大于你设置的宽度的时候,外层div会充满整个显示器,他就会自适应,当你拉动浏览器他的宽度小于你设置的内层div宽度时,div就出现定宽效果。

上面这段就是淘宝商城页面的现在基本原理,我不知道你要的是不是这个效果。

下面这段代码就是淘宝页面宽度自适应效果原来代码,把这段代码复制到你的dw中,预览一下,看看是不是你想要的效果。这里为了方便显示,我把div的高度都设死了,在实际操作中,高度可以自适应,在head center bottom 这三个最外层的div背景中,替换为可以沿x轴平铺的图片就成为了淘宝页面效果。

如有疑问可以发邮件联系我。





无标题文档







logo text






center left

center right









把这段代码复制到你的dw中,预览一下,看看是不是你想要的效果。

回答2:

.title_right{
height:30px;
float:left;
width:120px;【这里要指定宽度】
background:
url(iconem.gif)
repeat-x;
}
另外,如果元素设置为浮动后应设置其宽度,否则其宽度会随内容的多少而改变(当然如果你是想要这中效果另当别论)

回答3:

首先不得不说1楼的回答很精彩,但貌似楼主需要更简单的东西。

CSS中有一项 min-width 是用来设定最小宽度值的,源自于Firefox吧我记得。使用方法,例如:width:100%;min-width:800px;这样就会实现你要的效果。高度也同理。

加油喽

回答4:

这个要判断客户端的分辨率

ceshi.html
------------------------------------------------



javascript判断浏览器分辨率调用不同css样式实例




1111




1.css
--------------
.ceshi{ width:200px; border:solid 1px #000;}

2.css
----------------
.ceshi{ width:80%; border:solid 1px #000;}

把上边的这3个文件保存在同一个目录下
用800*600的分辨率和1280*1024的分辨率看看效果