Как добавить отступы вокруг изображений, сохраняя два в строке? - PullRequest
Новая
       70

Как добавить отступы вокруг изображений, сохраняя два в строке?

0 голосов
/ 03 октября 2019

Я пытаюсь добавить пробел между двумя изображениями в одной строке. Добавление отступов заставляет каждое изображение иметь свою собственную строку, но я хочу отобразить два изображения в одной строке.

Я попытался добавить отступы вокруг всех изображений, я также изменил ширину%.

HTML: 

<div class="section group">
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
</div>

CSS: 

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

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 0.2%;
}
.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 FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.95%;
}
.span_2_of_4 {
    width: 49.9%;
}
.span_1_of_4 {
    width: 24.85%;
}

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

Я хочу отображать строки из четырех изображений на рабочем столе и строки из двух изображений на мобильном телефоне.

...