求HTML指教,当浏览器窗口大小变化时,如何让内容布局不变
最近在做网页的时候发现当浏览器窗口最大化时,布局显示正常,可是如果变小的时候整个布局就乱了,非常难看,想请问下如何能做到像下图百度这样窗口大小变化时布局不变,最多就是看不...
最近在做网页的时候发现当浏览器窗口最大化时,布局显示正常,可是如果变小的时候整个布局就乱了,非常难看,想请问下如何能做到像下图百度这样窗口大小变化时布局不变,最多就是看不到了,请各位HTML高手不吝赐教,不胜感激
展开
4个回答
展开全部
如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性。
在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化。
设置代码如下:
<html>
<head>
<title>主页面</title>
<style>
body{
margin:0px;
width:1350px;
min-width:1024px;
max-width:100%;
height:100%;
background-color:#F0F0F0;
}
#head{
background-color:#FFFF00;
width:1350px;
height:100px;
min-width:1024px;
}
#center{
background-color:#00FFFF;
width:1350px;
min-height:100%;
position:relative;
min-width:1024px;
}
#foot{
background-color:#FF00FF;
width:1350px;
height:100px;
min-width:1024px;
}
#left{
width:150px;
height:100%;
background-color:#EEEEEE;
position:absolute;
margin-left:60px;
}
#main{
width:924px;
height:100%;
background-color:#EE00FF;
position:absolute;
margin-left:210px;
}
#right{
width:150px;
height:100%;
background-color:#EEFF00;
position:absolute;
margin-left:1134px;
}
</style>
</head>
<body>
<thead>
<div id="head">
你好
</div>
</thead>
<tbody>
<div id="center">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>
</tbody>
<tfoot>
<div id="foot">大家好</div>
</tfoot>
</body>
</html>
展开全部
简单点就是布局设置宽度的时候,用百分百设置。但这样还是很容易出问题(内容溢出,内容移位)。最好就是用响应式布局,专门针对各个分辨率进行设计css。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2015-10-05
展开全部
将你的网页的元素的大小和位置固定住,通过css中的width和height属性来设定。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
设置准确宽度呗
想自适应就这是百分比
想自适应就这是百分比
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询