Полный контейнер в Grid System - PullRequest
Новая
       8

Полный контейнер в Grid System

0 голосов
/ 31 октября 2018

Вечер!

В настоящее время я пытаюсь отобразить полностью 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, но это просто привело к беспорядку.

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Просто добавьте 

body {
    margin: 0;
}

А если вы хотите наценку на контейнер 

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

Если вам нужен центрированный контейнер определенной ширины, просто добавьте max-width и измените поля, а затем добавьте отступы, чтобы освободить пространство между контейнером и содержимым 

.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;
    }
}

Я вижу, что в вашей онлайн-версии есть *** дублированных CSS-файлов .col и .container, вам действительно нужно их удалить. С ними будет сложно разобраться, как только таблица стилей станет более сложной

Не стесняйтесь уточнить вопрос о том, что я неправильно понял

0 голосов
/ 31 октября 2018

Бро просто добавь в 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>
...