本篇内容介绍了“html左中右自适应布局的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在最新的html标准中 有了个calc CSS表
本篇内容介绍了“html左中右自适应布局的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在最新的html标准中 有了个calc CSS表达式，我们可以用这个来计算布局。
但是在古老的IE中，却不支持，为了所有浏览器的支持，这里用了js来做。
截图： 
code：
代码如下:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta Http-equiv="keyWords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var left,center,right,width;
window.onload=function(){
left=$('left');
center=$('center');
right=$('right');
onresize();
};
window.onresize=function(){
try {
width = document.body.clientWidth;
center.style.width = (width - left.clientWidth - right.clientWidth - 0) + "px";
}catch(e){
//小于0会报错
}
};
function $(id){
return document.getElementById(id);
}
</script>
<style>
body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left,#center,#right{
width:200px;
height:100px;
background-color:rgb(34,124,134);
float:left;
height:100%;
}
#center{
background-color:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
“html左中右自适应布局的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: html左中右自适应布局的方法
本文链接: https://lsjlt.com/news/251475.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0