为什么右侧设置margin-right:-100%不行呢,右侧若用百分比该如何设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
body{min-width: 700px;}
.header,
.footer{
float: left;
width: 100%;
background:#ddd;
height:40px;
line-height: 40px;
text-align: center;
}
.container{
padding: 0 220px 0 200px;
}
.left,.middle,.right{
position: relative;
float: left;
min-height: 300px;
}
.middle{
width: 100%;
background:blue;
}
.left{
width: 200px;
background:#f00;
margin-left: -100%;
left:-200px;
}
.right{
width:220px;
background:#30a457;
margin-left:-220px;
right: -220px
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的这是死的似的</p>
</div>
<div class="left">
<h4>left</h4>
<p>是死的似是死的</p>
</div>
<div class="right">
<h4>right</h4>
<p>是死的似是死的似是死的似是死的似是死的似</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星