Question

我目前正在一个小型网站上工作，现在我遇到了一些问题。我的css真的很糟糕，我几乎不知道如何做某事。

在本网站的右侧网站上。

http://s526367159.online.de/reclaim/website/home-one-page/

你可以看到一个包含一些图片的方框。这看起来不太好。我脑子里最简单的解决方案就是在这个盒子里添加一个在Photoshop中创建的.png图片，但是我想用.css做这件事，因为我花了很多时间让这些东西工作。

我现在的问题是，是否可以添加边框并使小图片彼此间隔更小，而不需要为每个图片添加大量代码？＆＃34;？

这是基本代码。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;}
</style>
<table class="tg">
  <tr>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /></a></td>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /></td>
  </tr>
  <tr>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /></a></td>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /></td>
  </tr>
</table>

非常感谢这里的一些帮助。

Answer 1

您可以在类似于此

的样式中添加新行

.tg img{margin: 5px; border: 1px solid red;}

这将改变该表中所有img标签的样式。

Answer 2

尝试添加此规则：

.md-tabs .tab-content img{
   margin: 3px;
   border: 1px solid white;
}

将像素和颜色更改为您想要的任何内容。

如果您希望您的css规则更具体，请使用直接父母。

Answer 3

你的代码中间有一个坏了。

你可以做的只是添加一个带有一点造型的类并将其应用到每个图像。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;}
.spacing {padding:3px;}
</style>
<table class="tg">
<tr>
    <td class="tg-031e ">
        <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" />
    </td>
    <td class="tg-031e">
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" />
    </td>
</tr>
<tr>
    <td class="tg-031e">
        <img  src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" />
    </td>
    <td class="tg-031e">
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" />
    </td>
</tr>

或者你可以做这样的事情

.md-tabs .tab-content img{
 padding: 3px;
}

表CSS样式（布局）

3 个答案: