如何强制在css表之间的空间(响应网页) [英] How to force space inbetween a css table (responsive webpage)
本文介绍了如何强制在css表之间的空间(响应网页)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个CSS表格,我想在单元格之间有空格,但不在第一个图像的左边和最后一个图像的右边。
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 would like:
目前的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;
}
请注意,这是一个响应式网页,所以我想要的空间总是保留,但是我想根据设备大小更改空间,所以使用%。
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表之间的空间(响应网页)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文