<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貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
1,?.left 背景顏色有誤background:#00FE; 改成background:#0FE;就能看到效果了;
2, .left和.right都是相對(duì)于<body>定位的;
初雪2
TA貢獻(xiàn)8條經(jīng)驗(yàn) 獲得超20個(gè)贊
right和left的父級(jí)設(shè)置下position:relative，right和left才能相對(duì)于父級(jí)定位，望采納
俠客島的含笑
TA貢獻(xiàn)552條經(jīng)驗(yàn) 獲得超285個(gè)贊
<!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>添加回答
舉報(bào)
0/150
提交
取消