Question

我的图像似乎相互堆叠，我正试图在它们之间创造一些空间。我尝试在其他网站上搜索，但似乎没有任何工作。有人可以查看错误并帮助我吗？

CSS：

DIV.contact
{
	display: inline-block;
	width: 140px;
	text-align: center;
	vertical-align: middle
}

<div style="line-height: 140px">
<div class="contact"><img src="https://i.pinimg.com/564x/72/49/29/724929194ddf777ebcc33278286dec62.jpg" width="240" height="160" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/89/63/06/896306fa454110ae996fe43e3e9c7339.jpg" width="160" height="240" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/80/2d/eb/802deb31195f94c0bdec3b06ac0dbd2a.jpg" width="220" height="220" hspace="50" vspace="2"></div>

<p>
<div class="contact"><img src="https://i.pinimg.com/564x/8f/95/41/8f9541f5845b6d2f31aec0c5f77fcf77.jpg" width="150" height="150" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/51/7d/91/517d91c4e628e6f0b637d73584c4d8e4.jpg" width="190" height="140" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/19/62/cb/1962cbc05ac837fb33b75e6556bb5df2.jpg" width="180" height="240" hspace="20" vspace="2"></div>
</p>
<p>
<div class="contact"><img src="https://i.pinimg.com/564x/41/e9/49/41e94905f208bfbcf015deadbe6de17a.jpg" width="240" height="180" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/d0/37/83/d0378348dbb149eddb085ff3402cc072.jpg" width="140" height="190" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/63/58/b2/6358b24f4ec875fcd64d965db44812e3.jpg" width="200" height="120" hspace="50" vspace="2"></div>
</p>
<p>
<div class="contact"><img src="https://i.pinimg.com/564x/26/0d/c8/260dc8231aa5cd36414330b7e7c9c55d.jpg" width="260" height="200" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/de/2c/54/de2c546b3ff024eefedf1fe3af3c51cd.jpg" width="120" height="200" hspace="50" vspace="2"></div>
<div class="contact"><img src="https://i.pinimg.com/564x/9e/30/c9/9e30c9001ae7db58c431440d7a1cc0e1.jpg" width="190" height="240" hspace="50" vspace="2"></div>
</div> </p>

Answer 1

是因为你将div设置为160并且图像更宽。

请添加：

DIV.contact img
{
    max-width: 100%;
}

删除vspace和hspace时，一切都按预期工作。不知道你为什么要用它。

Answer 2

<?php  
     foreach ($h->result() as $row)  
     {  
        ?><tr>  
        <td><?php echo $row->mobile_no ?></td>  
        <td><?php echo $row->country ?></td>  
        </tr>  
     <?php }  
     ?>

这应该做你想要的。

Answer 3

你可以使用display: block;然后让div向左浮动。

然后只需使用margin: a b c d;添加间距。

Answer 4

只需将padding添加到课程.contact

即可

.contact {
    padding: 10px 10px 10px 10px; // top,right,bottem,left
}

Answer 5

从CSS中删除宽度

DIV.contact
{
display: inline-block;
width: 140px;
text-align: center;
vertical-align: middle
}

将其更改为

DIV.contact
{
display: inline-block;
text-align: center;
vertical-align: middle
}

Answer 6

您可以使用以下方法：

填充：

DIV.contact
{
    padding: 20px; /*you can use % values as well {like: 2%;}*/
    display: inline-block;
    width: 140px;
    text-align: center;
    vertical-align: middle
}

页边距：

DIV.contact
{
    margin-right:15px;
    margin-bottom:20px;
    display: inline-block;
    width: 140px;
    text-align: center;
    vertical-align: middle
}

Answer 7

简单的答案是将所有想要的图片放在同一个div中。如果你需要几个div，你必须采取另一种方式。在将来，请在css文件或样式元素中编写所有css。更容易看到所有代码。

＆＃13;

img{
width: 25%;
}

＆＃13;

<div style="line-height: 140px">
<img src="https://i.pinimg.com/564x/72/49/29/724929194ddf777ebcc33278286dec62.jpg" width="240" height="160">
<img src="https://i.pinimg.com/564x/89/63/06/896306fa454110ae996fe43e3e9c7339.jpg" width="160" height="240">
<img src="https://i.pinimg.com/564x/80/2d/eb/802deb31195f94c0bdec3b06ac0dbd2a.jpg" width="220" height="220">
</div>

<div style="line-height: 140px">
<img src="https://i.pinimg.com/564x/72/49/29/724929194ddf777ebcc33278286dec62.jpg" width="240" height="160">
<img src="https://i.pinimg.com/564x/89/63/06/896306fa454110ae996fe43e3e9c7339.jpg" width="160" height="240">
<img src="https://i.pinimg.com/564x/80/2d/eb/802deb31195f94c0bdec3b06ac0dbd2a.jpg" width="220" height="220">
</div>
<div style="line-height: 140px">
<img src="https://i.pinimg.com/564x/72/49/29/724929194ddf777ebcc33278286dec62.jpg" width="240" height="160">
<img src="https://i.pinimg.com/564x/89/63/06/896306fa454110ae996fe43e3e9c7339.jpg" width="160" height="240">
<img src="https://i.pinimg.com/564x/80/2d/eb/802deb31195f94c0bdec3b06ac0dbd2a.jpg" width="220" height="220">
</div>
<div style="line-height: 140px">
<img src="https://i.pinimg.com/564x/72/49/29/724929194ddf777ebcc33278286dec62.jpg" width="240" height="160">
<img src="https://i.pinimg.com/564x/89/63/06/896306fa454110ae996fe43e3e9c7339.jpg" width="160" height="240">
<img src="https://i.pinimg.com/564x/80/2d/eb/802deb31195f94c0bdec3b06ac0dbd2a.jpg" width="220" height="220">
</div>

＆＃13;

如何为图像添加间距

7 个答案: