中间部分显示不出来

jike_2679820 响应式布局基础 05月06日提问

  • 0 回答
  • 125 浏览

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="style.css" type="text/css" rel="stylesheet">

</head>

<body>

    <div class="heading"></div>

    <div class="container">

        <div class="left"></div>

        <div class="main"></div>

        <div class="right"></div>

    </div>

    <div class="footing"></div>

</body>

</html>

* {

    margin: 0px;

    padding: 0px;

}

.heading,

.container,

.footing {

    margin: 10px auto;

}

.heading {

    height: 100px;

    background-color: chocolate;

}

.left,

.right,

.main {

    background-color: cornflowerblue;

}

.footing {

    height: 100px;

    background-color: aquamarine;

}

@media screen and (min-width:960px) {

    .heading,

    .container,

    .footing {

        width: 960px;

    }

    .left,

    .main,

    .right {

        float: left;

        height: 500px;

    }

    .left,

    .right {

        width: 200px;

    }

    .main {

        margin-left: 5px;

        margin-right: 5px;

        width: 550px;

    }

    .container {

        height: 500px;

    }

}

@media screen and (min-width:600px) and (max-width:960px) {

    .heading,

    .container,

    .footing {

        width: 600px;

    }

    .left,

    .main {

        float: left;

        height: 400px;

    }

    .right {

        display: none;

    }

    .left {

        width: 160px;

    }

    main {

        width: 435px;

        margin-left: 5px;

    }

    .container {

        height: 400px;

    }

}

@media screen and (max-width:600px) {

    .heading,

    .container,

    .footing {

        width: 400px;

    }

    .left,

    .right {

        width: 400px;

        height: 100px;

    }

    .main {

        margin-top: 10px;

        width: 400px;

        height: 200px;

    }

    .right {

        margin-top: 10px;

    }

    .container {

        height: 420px;

    }

}