我有一个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;
}
请记住,这是一个响应式网页,所以我希望空间始终保留,但我希望空间根据设备大小进行更改,因此请使用%。
答案 0 :(得分: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%;
}
答案 1 :(得分:0)
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}
答案 2 :(得分:0)
尝试使用display: flex;
代替display: table;
将display: flex;
和justify-content: space-between;
提供给父级。
答案 3 :(得分:0)
使用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;
}
&#13;
<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>
&#13;