Question

我正在尝试整合基于响应网格的网站，但最右边似乎有一个很大的空间，阻止网站填满浏览器窗口。我尝试了很多东西，但到目前为止还没有运气。如果有人能让我知道要解决什么问题会很棒！

我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="style_main.css">

</head>
<body>


<section class="wrapper">

        <div class="column-main_left">
            <div class="column-header"><span class="container"><img src="logo.png" id="logo"></img></span></div>
            <div class="column-contact"><span>contact</span></div>
        </div>

        <div class="column-main_left">
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
        </div>


</section>

</body>
</html>

我的样式表：

 body {
      padding: 0; 
      margin: 0;
    }
    html {
      padding: 0; 
      margin: 0;
      font-size:100%;
    }

    *,
    *:after,
    *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    .wrapper {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .wrapper:after
    {
          content: "";
          display: table;
          clear: both; 
    }

    img {
        width: auto;
        max-width: 100%;
        height: auto !important; 
        }

    #logo {
        width: 75%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    [class*='column-'] {
        position: relative;
        float: left;
        padding: 1em;
        width: 100%;
        min-height: 1px; 
    }
    .column-work {
            margin-bottom:1em;
    }

    .column-header {
            padding: 0em;
            width: 100%;
    }

     .column-contact { 
            padding: 0em;
            width: 100%; 
            margin-top: 0.09em;
    }

    * {
        color: #363742;
    }
    span {
        display: block;
        background: #c2f0ff;
        padding: 1em 0;
        text-align: center;
    }     
    .container{
        position:  absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    @media only screen and (min-width: 25em) {

        .wrapper {
            width: 95%;
            max-width: 150em;
        }

        .column-main_left {
            width: 25%;
            }

        .column-main_right {
            width: 75%;
            }

        .column-work {
            width: 29%; 
            margin-top: 0em;
            margin-left:0.5em;
            margin-right:0.5em;
            margin-bottom:1em;
            }
    }
    .column-work:before{
            content: "";
            display: block;
            padding-top: 75%;
    }
    .column-header:before{
            content: "";
            display: block;
            padding-top: 75%;
    }

Answer 1

您的样式表中已有.column-main_right{width:75%;}，请使用column-main_right代替column-main_left作为第二列 - DEMO

<强> HTML

<section class="wrapper">
        <div class="column-main_left">
            <div class="column-header"><span class="container"><img src="logo.png" id="logo"></img></span></div>
            <div class="column-contact"><span>contact</span></div>
        </div>
        <div class="column-main_right"> <!-- column-main_right -->
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
            <div class="column-work"><span class="container">work1</span></div>
        </div>
</section>

<强> CSS

body {
      padding: 0; 
      margin: 0;
    }
    html {
      padding: 0; 
      margin: 0;
      font-size:100%;
    }

    *,
    *:after,
    *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; 
    }

    .wrapper {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .wrapper:after
    {
          content: "";
          display: table;
          clear: both; 
    }

    img {
        width: auto;
        max-width: 100%;
        height: auto !important; 
        }

    #logo {
        width: 75%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    [class*='column-'] {
        position: relative;
        float: left;
        padding: 1em;
        width: 100%;
        min-height: 1px; 
    }
    .column-work {
            margin-bottom:1em;
    }

    .column-header {
            padding: 0em;
            width: 100%;
    }

     .column-contact { 
            padding: 0em;
            width: 100%; 
            margin-top: 0.09em;
    }

    * {
        color: #363742;
    }
    span {
        display: block;
        background: #c2f0ff;
        padding: 1em 0;
        text-align: center;
    }     
    .container{
        position:  absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    @media only screen and (min-width: 25em) {

        .wrapper {
            width: 95%;
            max-width: 150em;
        }

        .column-main_left {
            width: 25%;
            }

        .column-main_right {
            width: 75%;
            }

        .column-work {
            width: 29%; 
            margin-top: 0em;
            margin-left:0.5em;
            margin-right:0.5em;
            margin-bottom:1em;
            }
    }
    .column-work:before{
            content: "";
            display: block;
            padding-top: 75%;
    }
    .column-header:before{
            content: "";
            display: block;
            padding-top: 75%;
    }

意外填充阻止响应式网页中的全屏

1 个答案: