各位大神，这个.left和.right的设置有什么问题
<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>
qq_做人如水_0浏览 1902回答 3
3回答
-
啊艾力克斯4396313
1, .left 背景颜色有误background:#00FE; 改成background:#0FE;就能看到效果了;2, .left和.right都是相对于<body>定位的; -
初雪2
right和left的父级设置下position:relative，right和left才能相对于父级定位，望采纳 -
侠客岛的含笑
<!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>
随时随地看视频慕课网APP
Html/CSS