Question

我注意到我的CSS出现问题，而且我不知道如何取消设置我的最大宽度。我想在外面看到下图所示的图像。图片应在浏览器的整个宽度上展开，而不是由菜单（菜单2和功能）等其他部分包裹的容器。我该怎么办？

https://iv.pl/images/87676767254341289320.jpg

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

    <link href="css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="css/skeleton.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap-grid.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-reboot.css" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .page {
            display: flex;
            flex-wrap: wrap;

        }

        .section {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu {
            background-color: #5995DA;
            height: 100px;
        }

        .menu2 {
            background-color: #4CAF50;
            height: 100px;
        }

        .header {
            background-color: #30ff1c;
            justify-content: center;
            align-items: center;
            height: auto;
            display: block;

        }

        .content {
            background-color: #EAEDF0;
            height: 600px;
        }

        .sign-up {
            background-color: #D6E9FE;
        }

        .feature-1 {
            background-color: #F5CF8E;
        }

        .feature-2 {
            background-color: #F09A9D;
        }

        .feature-3 {
            background-color: #C8C6FA;
        }

        .feature-4 {
            background-color: #9c27b0;
        }

        .illustration {
            width: 100%;
            display: block;
        }

        /*.sign-up {*/
        /*    height: 200px;*/
        /*    order: 1;*/
        /*}*/
        /*.content {*/
        /*    order: 2;*/
        /*}*/

        /* Mobile Styles */
        @media only screen and (max-width: 400px) {

            body {
                background-color: #F09A9D; /* Red */
            }

        }

        /* Tablet Styles */
        @media only screen and (min-width: 401px) and (max-width: 960px) {

            body {
                background-color: #F5CF8E;
            }
            .feature-1,
            .feature-2,
            .feature-3,
            .feature-4 {
                width: 50%;
            }

        }

        /* Desktop Styles */
        @media only screen and (min-width: 961px) {

            body {
                background-color: #B2D6FF; /* Blue */
            }
            .page {
                width: 960px;
                margin: 0 auto;
            }
            .menu {
                width:25%
            }
            .menu2 {
                width: 75%;
            }

            .feature-1,
            .feature-2,
            .feature-3,
            .feature-4 {
                width: 25%;
            }

        }
    </style>
</head>
<body>
<div class='page'>

    <div class='section menu'>
        <p>MENU</p>
    </div>
    <div class="section menu2">
        <p>MENU 2</p>
    </div>

    <div class="section header">
        <img src="images/16.jpg" height="200px" width="100%"/>
    </div>

    <div class='section feature-1'>
        <p>FEATURE 1</p>
    </div>

    <div class='section feature-2'>
        <p>FEATURE 2</p>
    </div>

    <div class='section feature-3'>
        <p>FEATURE 3</p>
    </div>

    <div class="section feature-4">
        <p>FEATURE 4</p>
    </div>

    <div class='section content'>
        <p>CONTENT</p>
    </div>

    <div class='section sign-up'>
        <p>SIGN UP</p>
    </div>

</div>
</body>
</html>

Answer 1

如果我理解正确，它可以为您提供帮助：

main {
  width: 100%;
  background: yellow;
}

.container{
  width: 50%;
  margin:auto;
}

section {
  width: 100%;
  height: 100px
}

.section1 {background: red}
.section2 {background: blue}
.section3 {background: green}

.section2 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

<main>
  <div class="container">
    <section class="section1"></section>
    <section class="section2"></section>
    <section class="section3"></section>
  </div>
</main>

如何用最大宽度以外的图像取消设置标题或容器？

1 个答案: