<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} div{text-align:left;} .top{height:100px;width:100%;background:#CCCCCC;} .main{height:450px;width:100%;background:#FC0100;} .left{width:10px;height:450px;background:#00FE;position:absolute;left:0;top:110px;} .right{width:800px;height:450px;background:#9ACC99;position:absolute;right:0;top:100px;} .foot{width:100%;height:100px;background:#FF6634;} </style></head><body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div>
3 回答
啊艾力克斯4396313
TA贡献1条经验 获得超0个赞
1, .left 背景颜色有误background:#00FE; 改成background:#0FE;就能看到效果了;
2, .left和.right都是相对于<body>定位的;
侠客岛的含笑
TA贡献552条经验 获得超285个赞
<!DOCTYPE html>
<html>
<head>
<title>Flex Layout</title>
<meta charset="utf-8"/>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
div{text-align:left;}
.top{height:100px;width:100%;background:#CCCCCC;}
.main{height:450px;width:100%;background:#FC0100;}
.left{width:50%;background:red;position:absolute;left:0;top:100px;}
.right{width:50%;height:450px;background:#9ACC99;position:absolute;right:0;top:100px;}
.foot{width:100%;height:100px;background:#FF6634;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<body>
</html>- 3 回答
- 0 关注
- 2023 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消