如何强制在 css 表之间留出空间(响应式网页)

问题描述

我有一个 CSS 表格，我想在单元格之间留出空间，但不要在第一张图片的左侧和最后一张图片的右侧.

这是我所拥有的截图:

这是我想要的截图:

当前的 HTML 是:

 
<div class="lower"><img src="images/one.jpg" alt="戴在手指上的戒指"/></div><div class="lower"><img src="images/two.jpg" alt="男士裤子"/></div><div class="lower"><img src="images/three.jpg" alt="Flowers"/></div><div class="lower"><img src="images/four.jpg" alt="戒指"/></div>

CSS 是

#footer {显示:表；宽度:100%；最大宽度:1024px；保证金最高:1%；}.降低 {显示:表格单元格；}#footer img {宽度:100%；高度:自动；最大宽度:256px；}

请记住，这是一个响应式网页，所以我希望空间始终保留，但我希望空间根据设备大小而改变，因此使用 %.

解决方案

hi pls apply this css and set padding.降低 {显示:表格单元格；填充:0 20px;}.lower:first-child{ padding-left:0}.lower:last-child{ padding-right:0}

I have a CSS table and I would like to have space in-between the cells but not at the left of the first image and the right of the last image.

Here is a screenshot of what I have:

Here is a screenshot of what I would like:

The current HTML is:

    <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>

and the CSS is

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

.lower {
  display: table-cell;
}

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

Please bear in mind that this is a responsive webpage so I would like the space to always remain however I would like the space to change according to device size, so using %.

解决方案

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}

这篇关于如何强制在 css 表之间留出空间(响应式网页)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！