Как заставить пространство между таблицей css (отзывчивая веб-страница)

У меня есть таблица CSS, и я хотел бы иметь пространство между ячейками, но не слева от первого изображения и справа от последнего изображения.Как заставить пространство между таблицей css (отзывчивая веб-страница)

Вот скриншот того, что у меня есть:

Вот скриншот того, что я хотел бы:

Текущий HTML является:

<div id="footer"> 
     <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div> 
     <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div> 
     <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div> 
     <div class="lower"><img src="images/four.jpg" alt="The rings"/></div> 
    </div>

и CSS составляет

#footer { 
    display: table; 
    width: 100%; 
    max-width: 1024px; 
    margin-top: 1%; 
} 

.lower { 
    display: table-cell; 
} 

#footer img { 
    width: 100%; 
    height: auto; 
    max-width: 256px; 
}

Пожалуйста, имейте в виду, что это отзывчивая веб-страница, поэтому я хотел бы, чтобы пространство всегда оставалось, но я хотел бы, чтобы пространство менялось в соответствии с размером устройства, поэтому используйте%.

источник

2016-10-27 Mark

hi pls apply this css and set padding 

.lower { 
display: table-cell; 
padding:0 20px; 
} 
.lower:first-child{ padding-left:0} 
.lower:last-child{ padding-right:0}

источник

2016-10-27 10:06:25

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

Применить это.

#footer { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    max-width: 1024px; 
    background-color: #F00; 
    padding: 0; 
    margin: 0; 
    max-height: content-height; 
} 

.lower { 
    margin-left: 2%; 
} 

#footer img { 
    width: 100%; 
    height: 100%; 
}

Demo

источник

2016-10-27 10:03:36 Roberrrt

теперь последнее изображение больше, чем все остальные образы? – Mark

О, я забыл, вам придется также подстроить '# footer', обновить мой ответ. – Roberrrt

Это приводит к заполнению ниже первых трех изображений, и последнее изображение в порядке, я попытался добавить padding-bottom 0; но это не работает – Mark

display: flex; Попробуйте вместо display: table;

display: flex; Дайте и justify-content: space-between; родителю.

источник

2016-10-27 10:06:30

Я исследовал использование flex, и элемент space-between действительно применим только к изображениям меньшего размера. – Mark

Вы не используете изображение напрямую в качестве дочернего справа, чтобы оно работало, давая ** text-align: center; ** для дочернего элемента div. Он будет решать, если он имеет какие-либо изменения в размерах изображений. –

Используйте CSS смежно селектор элемента:

.lower + .lower { 
    padding-left: 20px; 
}

#footer { 
 
    display: table; 
 
    width: 100%; 
 
    max-width: 1024px; 
 
    margin-top: 1%; 
 
} 
 
.lower { 
 
    display: table-cell; 
 
} 
 
.lower + .lower { 
 
    padding-left: 20px; 
 
} 
 
#footer img { 
 
    width: 100%; 
 
    height: auto; 
 
    max-width: 256px; 
 
}

<div id="footer"> 
 
    <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div> 
 
    <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div> 
 
    <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div> 
 
    <div class="lower"><img src="images/four.jpg" alt="The rings"/></div> 
 
</div>

источник

2016-10-27 10:07:27 Nhan

Как заставить пространство между таблицей css (отзывчивая веб-страница)

ответ

Смежные вопросы