请稍等 ...

我做的双飞翼布局为什么中间部分设置margin-right无效？

我做的代码如下，但是似乎中间部分的margin-right没生效，我找了半天没找到原因，麻烦老师帮忙看一下，谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        .main{
            width: 100%;
            height: 50px;
            background-color: aliceblue;
        }
        .inMain{
            width: 100%;
            height: 50px;
            background-color: blueviolet;
            margin-left: 200px;
            margin-right: 200px;
        }
        .float{
            float:left;
        }
        .left{
            background-color: aqua;
            width: 200px;
            height: 50px;
            /* margin-left: -100%; */
        }
        .right{
            background-color: pink;
            width: 200px;
            height: 50px;
            /* margin-left:-200px; */
        }
    </style>
</head>
<body>
    <div class="main float">
        <div class="inMain"></div>
    </div>
    <div class="left float"></div>
    <div class="right float"></div>    
</body>
</html>

图片描述

慕妹8003063 2021-05-16 11:13:44

源自：3-8 布局-解题-4

548

收起

提交取消

1回答

双越回答被采纳获得+3积分 2021-05-16 12:15:49

删掉 inMain 的 width:100% ，试一下。

0 回复有任何疑惑可以回复我~

收起回答

提问者慕妹8003063 #1

非常感谢！但是，我还是不太明白为什么。width设置100%后，margin-right都会失效吗？

回复有任何疑惑可以回复我~ 2021-05-16 13:55:24

双越回复提问者慕妹8003063 #2
```
设置 width 之后，宽度就失去响应式了。
```
回复有任何疑惑可以回复我~ 2021-05-16 16:41:47
提问者慕妹8003063 回复双越 #3
```
非常感谢！
```
回复有任何疑惑可以回复我~ 2021-05-16 22:49:46