如何在 css table 之间强制 space （响应式网页）

Question

我有一个 CSS table 我想在单元格之间有 space 但不是在第一张图片的左侧和最后一张图片的右侧.

这是我的截图：

这是我想要的截图：

当前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;
}

请记住，这是一个响应式网页，因此我希望 space 始终保留，但我希望 space 根据设备大小进行更改，因此使用 %.

Answer 1

应用这个。

#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

Answer 2

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}

Answer 3

尝试 display: flex; 而不是 display: table;

将 display: flex; 和 justify-content: space-between; 交给 parent。

Answer 4

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

如何在 css table 之间强制 space （响应式网页）

How to force space inbetween a css table (responsive webpage)

html

css

responsive-design

fluid-layout

css-tables