时间戳

首页 > 解决方案 > 网格系统上的完整容器

html - 网格系统上的完整容器

问题描述

晚上！

我目前正在尝试显示一个完整的 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 但这只是让网格变得混乱。

任何帮助，将不胜感激。

标签： htmlcssmargin

解决方案

兄弟只需添加到 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>

推荐阅读