Question

我创建了自己的响应式网页设计网格，有12列（如引导程序），此网格中的每一行占用网格的100％。在我的html文件中，我有三个部分，其中每个部分占页面的33.33％，总计100％。当我尝试在这些部分之间添加边距时，行中的最后一部分跳转到新行。我知道bootstrap使用偏移类来解决这个问题，但我试图用我自己的响应式网页设计网格来实现一个解决方案。

您可以在此jsfiddle上查看HTML和CSS代码的预览，如果您只想查看代码，也可以在此处查看。

＆＃13;

 /********** Base Style **********/

* {
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
}

h1 {
    margin-bottom: 50px;
    text-align: center;
    font-size: 1.75em;
}

h2 {
    text-align: center;
    font-size: 1.25em;
    margin: 0px;
    width: 120px;
    border: 1px solid black;
}

section {
    background-color: #999999;
    height: auto;
    position: relative;
    text-align: justify;
    color: black;
    padding: 30px 15px 15px 15px;
    margin: 10px;
}

#title1 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #D99A95;
}

#title2 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #C44346;
}

#title3 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #E2D496;
}

/* Simple Responsive Framework. */

.row {
    width: 100%;
}


/************** Large Devices Only **************/

@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
        border: 1px solid black;
    }
    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%;
    }
    .col-lg-9 {
        width: 74.99%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

/************** Medium Devices Only **************/

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
        border: 1px solid black;
    }
    .col-md-1 {
        width: 8.33%;
    }
    .col-md-2 {
        width: 16.66%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%;
    }
    .col-md-8 {
        width: 66.66%;
    }
    .col-md-9 {
        width: 74.99%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%;
    }
    .col-md-12 {
        width: 100%;
    }
}

/************** Mobile Devices Only **************/

@media (max-width: 767px) {
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        float: left;
        border: 1px solid black;
    }
    .col-xs-1 {
        width: 8.33%;
    }
    .col-xs-2 {
        width: 16.66%;
    }
    .col-xs-3 {
        width: 25%;
    }
    .col-xs-4 {
        width: 33.33%;
    }
    .col-xs-5 {
        width: 41.66%;
    }
    .col-xs-6 {
        width: 50%;
    }
    .col-xs-7 {
        width: 58.33%;
    }
    .col-xs-8 {
        width: 66.66%;
    }
    .col-xs-9 {
        width: 74.99%;
    }
    .col-xs-10 {
        width: 83.33%;
    }
    .col-xs-11 {
        width: 91.66%;
    }
    .col-xs-12 {
        width: 100%;
    }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Module 2 Solution</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway|Roboto" rel="stylesheet">
</head>

<body>
    <h1>Module 2 Solution</h1>
    <div class="row">
        <section class="col-lg-4 col-md-6 col-xs-12">
            <h2 id="title1">Chicken</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
        <section class="col-lg-4 col-md-6 col-xs-12">
            <h2 id="title2">Beef</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
        <section class="col-lg-4 col-md-12 col-xs-12">
            <h2 id="title3">Sushi</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
    </div>
</body>

</html>

＆＃13;

Answer 1

是的，您需要使用calc()

从列宽中移除边距，如下面的示例中所示，代码的一部分

- 20px中的width: calc(33.33% - 20px);来自您的10px边距，section每边10张

/********** Base Style **********/

* {
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
}

h1 {
    margin-bottom: 50px;
    text-align: center;
    font-size: 1.75em;
}

h2 {
    text-align: center;
    font-size: 1.25em;
    margin: 0px;
    width: 120px;
    border: 1px solid black;
}

section {
    background-color: #999999;
    height: auto;
    position: relative;
    text-align: justify;
    color: black;
    padding: 30px 15px 15px 15px;
    margin: 10px;
}

#title1 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color:	#D99A95;
}

#title2 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #C44346;
}

#title3 {
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #E2D496;
}

/* Simple Responsive Framework. */

.row {
    width: 90%;
}


/************** Large Devices Only **************/

    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
        border: 1px solid black;
    }
    .col-lg-4 {
        width: calc(33.33% - 20px);
    }

<body>
    <h1>Module 2 Solution</h1>
    <div class="row">
        <section class="col-lg-4 col-md-6 col-xs-12">
            <h2 id="title1">Chicken</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
        <section class="col-lg-4 col-md-6 col-xs-12">
            <h2 id="title2">Beef</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
        <section class="col-lg-4 col-md-12 col-xs-12">
            <h2 id="title3">Sushi</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
    </div>
</body>

Answer 2

我发现你可以在该部分中添加另一个div类，然后设置该类的边距。新div将占用容器允许的空间，并且可以在新div上设置边距。外部div只控制响应性并包含div部分。

<body>
    <h1>Module 2 Solution</h1>
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
            <div class="section">
                <h2 id="title1">Chicken</h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                </p>
            </div>
        </div>

.section {
  background-color: #c7c7c7;
  border: 3px solid black;
  position: relative;
  height: auto;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  padding: 15px 10px 10px 10px;
}

在元素之间添加边距会导致元素开始换行

2 个答案: