Question

我是HTML和CSS的新手。我已经创建了一个表格，其中第一列和第二列之间的距离是正确的，其中第二列和第三列之间的距离以及第三列和第四列之间的距离大于第一列。我想要第二列和第三列之间的距离以及第三列和第四列之间的距离应该与第一列和第二列的距离相同。我怎样才能减少这个距离的 HTML

<table class="img_table">
<tr>
<td>
<img src="./images/FACILITIES.PNG"/>
<p><center>FACILITIES</br>MANAGEMENT</center></p>
</td>
<td>
<img src="./images/RESALE.PNG"/>
<p><center>RESALE</br>& RENTALS</center></p>
</td>
<td>
<img src="./images/AIR_CONDITIONER.PNG"/>
<p><center>AIR CONDITIONER</br>SERVICES</center></p>
</td>
<td>
<img src="./images/DEEP_CLEANING.PNG"/>
<p><center>DEEP CLEANING</br>& JANITORSERVICES</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/INTERIOR.PNG"/>
<p><center>INTERIOR</br>WORK</center></p>
</td>
<td>
<img src="./images/PAINTING.PNG"/>
<p><center>PAINTING</br>WORK</center></p>
</td>
<td>
<img src="./images/LANDSCAPING.PNG"/>
<p><center>LANDSCAPING</br>WORK</center></p>
</td>
<td>
<img src="./images/PEST_CONTROL.PNG"/>
<p><center>PEST CONTROL</br>WORK</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/SECURITY.PNG"/>
<p><center>SECURITY</br>SERVICES</center></p>
</td>
<td>
<img src="./images/CONCIERGE.PNG"/>
<p><center>CONCEIRGE</br>SERVICES</center></p>
</td>
<td>
<img src="./images/MOBILE_LANDLINE.PNG"/>
<p><center>MOBILE/LANDLINE</br>CONNECTION</center></p>
</td>

<td>
<img src="./images/UTILITY.PNG"/>
<p><center>UTILITY &</br>BILL PAYMENT</center></p>
</td>
</tr>

</table>

CSS

table.img_table{
position: absolute;
left:160px;
top: 295px; 
display: inline;
font-size:10px;
font-family:Verdana;
}

table.img_table td {
    text-align: center;
    padding: 10px
}
table.img_table td img {
    display: block;
    margin: 0 auto;
    padding: 10px
    height: 81px;
    width: 80px;
}

我已经创建了一个fiddle

Answer 1

表被设计为调整大小以适应内容，因此使用更长的单词或更宽的图像将意味着更大的列（我认为），这可以通过将“空白”输入较小的列或从较大的列中删除文本来解决。我确信还有另一种方法可以做到这一点，但它必须涉及以某种方式调整文本大小。希望这会有所帮助：）

Answer 2

这一切都发生了，因为如果你只写一个字母就写在你的桌子上你的长名字，那么你的编码是正确的，只是问题是单词的长度。

为了防止这种情况，你可以这样做：

table.img_table{
position: absolute;
left:160px;
top: 295px; 
display: inline;
font-size:10px;
font-family:Verdana;
}

    table.img_table td {
    text-align: center;
    padding: 10px
}
    table.img_table td img {
    display: block;
    margin: 0 auto;
    padding: 10px
    height: 81px;
    width: 100px;
}

通过简单地增加width: 100px，它显然会让你在所有图像之间保持相等的距离。

FIDDLE

Answer 3

您可以添加以下CSS。

table.img_table td {
    vertical-align: top;
    word-break: break-all;
}

Answer 4

当图片有大小时，段落标记的大小不一致。所以你必须添加

tr{
vertical-align:top;
}
p{
width:80px;
}

并删除所有 br 和中心标记。我更喜欢用div而不是table http://jsfiddle.net/6ABBx/4/

如何在表格中的列之间保持相等的距离

4 个答案: