為什么我把窗口逐漸拉小后，左、中、右板塊會(huì)分離？
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>Document</title>
? <style>
? ? *{
? ? ? margin: 0;
? ? ? padding: 0;
? ? }
? ? .header,.footer{
? ? ? height: 50px;
? ? ? line-height: 50px;
? ? ? background-color: gray;
? ? ? text-align: center;
? ? }
? ? .container{
? ? ? padding: 0 220px 0 200px;
? ? ? overflow: hidden;
? ? }
? ? .middle,.left,.right{
? ? ? float: left;
? ? ? height: 300px;
? ? ? position: relative;
? ? }
? ? .middle{
? ? ? width: 100%;
? ? ? background-color: red;
? ? }
? ? .left{
? ? ? width: 200px;
? ? ? background-color: blue;
? ? ? margin-left: -100%;
? ? ? left: -200px;
? ? }
? ? .right{
? ? ? width: 220px;
? ? ? background-color: green;
? ? ? margin-left: -220px;
? ? ? right: -220px;
? ? }
? </style>
</head>
<body>
? ? <div class="header">頭部</div>
? ? <div class="container">
? ? ? <div class="middle">中</div>
? ? ? <div class="left">左</div>
? ? ? <div class="right">右</div>
? ? </div>
? ? <div class="footer">底部</div>
</body>
</html>
2019-02-17
板塊不定寬試試