关于双列排版自适应问题：（左侧固定，右侧自适应）成功，（右侧固定，左侧自适应）不成功求原因

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双列</title>
    <style>
        .container {
            width: 1200px;
            min-height: 800px;
            margin:0 auto;
            background-color: #0086b3;
        }
        .right {
            width: 200px;
            height: 300px;
            background-color: red;
            float:right;
        }
        .main {
            height: 400px;
            background-color: green;
            margin-right: 200px;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: yellow;
            float:left;
        }
        .main-2 {
            height: 400px;
            background-color: greenyellow;
            margin-left: 200px;
        }
    </style>
</head>
<body>
<div class="container">
<!--右侧固定，左侧主体自适应不成功-->
    <h2>右侧固定，左侧主体自适应不成功</h2>
    <div class="right">右侧固定</div>
    <div class="main">左侧主体自适应</div>
<!--    左侧固定，右侧主体自适成功-->
    <h2>左侧固定，右侧主体自适成功</h2>
    <div class="left">左侧固定</div>
    <div class="main-2">右侧主题自适应</div>
</div>
</body>
</html>

效果图：

为什么右侧固定，左侧自适应，为什么反了了，请教老师！

相关文章