Question

晚上！

我目前正在尝试显示一个完整的100％围绕网格系统包装的容器，但是，整个容器仍在周围显示边距。

完整的CSS和html如下：

<body>
<div class="container filledBlack">
    <div class="section group">
        <div class="col span_4_of_12 filled matchheight">
            <p>TestLorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="js/jquery.js"></script>
<script src="js/matchHeight.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        $('.matchheight').matchHeight();
    });
    </script>

/* CONTAINER */
.container{
margin: 0;
padding: 0;
border: 0;
}

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
width: 100%;
}

.span_11_of_12 {
width: 91.53%;
}
.span_10_of_12 {
width: 83.06%;
}

.span_9_of_12 {
width: 74.6%;
}

.span_8_of_12 {
width: 66.13%;
}

.span_7_of_12 {
width: 57.66%;
}

.span_6_of_12 {
width: 49.2%;
}

.span_5_of_12 {
width: 40.73%;
}

.span_4_of_12 {
width: 32.26%;
}

.span_3_of_12 {
width: 23.8%;
}

.span_2_of_12 {
width: 15.33%;
}

.span_1_of_12 {
width: 6.866%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}
}

谁能给我任何让我创建容器而又不影响网格边距/填充等的想法？我尝试过reset.css，但这只会使网格混乱。

任何帮助将不胜感激。

Answer 1

Bro只需添加到CSS body { margin: 0px; }

/* REMOVE BODY MARGIN */
body {
margin: 0;
}

/* CONTAINER */
.container{
margin: 0;
padding: 0;
border: 0;
}

/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 {
width: 100%;
}

.span_11_of_12 {
width: 91.53%;
}
.span_10_of_12 {
width: 83.06%;
}

.span_9_of_12 {
width: 74.6%;
}

.span_8_of_12 {
width: 66.13%;
}

.span_7_of_12 {
width: 57.66%;
}

.span_6_of_12 {
width: 49.2%;
}

.span_5_of_12 {
width: 40.73%;
}

.span_4_of_12 {
width: 32.26%;
}

.span_3_of_12 {
width: 23.8%;
}

.span_2_of_12 {
width: 15.33%;
}

.span_1_of_12 {
width: 6.866%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}
}

<div class="container filledBlack">
    <div class="section group">
        <div class="col span_4_of_12 filled matchheight">
            <p>TestLorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="col span_4_of_12 filled matchheight">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
    </div>
</div>

Answer 2

只需添加

body {
    margin: 0;
}

如果您想在集装箱上留出利润

.container {
    margin: 0 2%; //or whatever percentage you want
}

如果您想要一个具有特定宽度的居中容器，只需添加一个最大宽度并更改边距，然后添加一些填充以在容器和内容之间留出空间

.container {
    max-width: 960px;
    margin: 0 auto; //centering the fixed-width container
    padding: 0 2% //Making space between container edge and content
}

我还建议您删除列上基于百分比的顶部和底部边距，并仅在它们开始堆叠的断点处添加它。考虑使用固定值，因为垂直边距/填充百分比是由父级宽度计算的，而不是高度（是的，对我来说也没有太大意义）。

.col {
    display: block;
    float: left;
    margin: 0 0 0 1.6%; //here I removed top and bottom margin
}

@media only screen and (max-width: 480px) {
    .col {
        margin-bottom: 10px;
    }
}

我可以看到您的在线版本上有大量重复的.col和.container CSS，您应该真正删除它们。一旦样式表变得更复杂，它们将变得很麻烦

请随时详细说明我误解了任何问题

网格系统上的完整容器

2 个答案: