如何控制div自动适应屏幕大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何控制div自动适应屏幕大小相关的知识，希望对你有一定的参考价值。
比如：
有3个div qwe1宽为200px(居左);qwe2宽为200px(居右);qwe3在两个div中间宽度随浏览器的放大缩小而自动改变
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>
不要小看这个问题 其实还是有点难度的
.qwe1width:200px;float:left;border:1px solid green
.qwe3
.qwe2width:200px;float:right;border:1px solid red
</style>
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>追问
抱歉，你的方法是不可行的。。。。。
qwe3的样式还是没弄 这样qwe3无法自动改变大小 而且qwe3一旦写了东西 还会改变qwe2的样式
<style>
bodymargin:0px;padding:0px;
.qwe1width:200px;height:5px;border:1px solid;float:left;
.qwe2width:100%;height:5px;border:1px solid;
.qwe3width:200px;height:5px;border:1px solid;float:right;
</style>
<div class="qwe1"></div>
<div class="qwe3"></div>
<div class="qwe2"></div>
</body>追问
这样的话 qwe2的宽会撑满整个html 不能达到我要的效果 我是要让它夹在2个div中间 能自动适应
追答就是啊，你什么浏览器啊，你用360的直接复制就可以，虽说有点缝隙，你看看那个兼容性，就可以解决！火狐完全没问题啊
追问你把每个div 加个padding:1px padding:2px padding:3px;就可以看出区别了 不是我要的那个效果
因为边框都和起来了所以你没发现
.qwe1width:200px;height:5px;border:1px solid;float:left; padding:1px
.qwe2width:100%;height:5px;border:1px solid; padding:2px;
.qwe3width:200px;height:5px;border:1px solid;float:right; padding:3px;
如果你就只用样式的话，难度还挺大的。追问
求教。。。。。
追答
1
3
2
不过，如果浏览器窗口宽度太小的话（小于400+中间那个div内容的宽度？），两边的td的宽度也就不够200了。
谢谢了 我要的效果是有了 可是这只是我要的框架 里面还要放很多东西 我估计会出问题
总之谢谢了 我试着做一下
position:relative;
.qwe1
float:left;
width:200px;
background:#F00;
.qwe2
width:200px;
float:right;
background:#0F0;
.qwe3
position:absolute;
background:#00F;
top:0;
left:200px;
right:200px;
追问
很好的解决了我的问题 但是又出现个问题就是ie6中间那块不好
本回答被提问者采纳以上是关于如何控制div自动适应屏幕大小的主要内容，如果未能解决你的问题，请参考以下文章