Question

我试图将我的10张随机图像分开一点，这样它们就不会被压扁而且一起被压扁。我尝试使用边框，我没有收到任何错误，只是它没有工作。我正在尝试使用边框作为填充，因此它必须是不可见的，只能在左侧和右侧。有什么帮助吗？

<html>
  <head>
    <title>Cards</title>
    <script type="text/css">
     .cardPad{
      border-top:none;
      border-bottom:none;
      border-left:10px;
      border-right:10px;
      }
    </script>
  </head>
  <body>
    <p>
     <?php 
      $cards = array("Messi", "Ronaldo", "Ibrahimovic", "Ribery", "Robben", "Neymar", "Rooney", "Casillas", "Falcao", "Van Persie", "Hazard", "Iniesta", "Xavi", "Schweinsteiger", "Silva", "Fabregas", "Lahm", "Aguero", "Cavani", "Vidic", "Ozil", "Mata", "Bale", "ThiagoSilva", "Kompany", "Tevez", "Toure", "Ramos", "Suarez", "Pirlo", "DiMaria", "Neuer", "Pique", "Buffon", "Lewandowski", "Gomez", "Chiellini", "Cole", "Pedro", "Busquets", "Cech", "Muller", "Hummels", "Alonso", "Navas", "Modric", "Cazorla", "Gotze", "Benzema", "Vidal", "Lavezzi");

shuffle($cards);

$cards = array_slice($cards, 0, 10);

foreach ($cards as $card) {
    echo "<img class='cardPad' src='http://d2bm3ljpacyxu8.cloudfront.net/fit/105x97/http://clearpkz.webs.com/webstore/$card.png'>";
}
?>
    </p>
  </body>
</html>

Answer 1

我为此创建了一个jsfiddle，this你想要的是什么？

实际上，您可以使用margin或padding来分隔这些<img>。我不明白为什么你不能让它发挥作用。

您可能需要发布修改后的代码，以便我们提供帮助。

Answer 2

也许这个：

 .cardPad{
    ...
    padding: 10px;
 }

干杯

Answer 3

首先，将样式表包含在<style>代码中，而不是<script>代码中。

<style>
     .cardPad {
       border:10px solid #00f;
       border-bottom:0;
       border-top:0;
      }
</style>

您需要指定要应用的边框样式。像“solid”，“dashed”等。默认颜色为＃000。为了清晰起见，我将其更改为蓝色。

对于填充目的，请使用填充/边距属性而不是边框。对于img，两者都会产生相同的效果，但实际上两者是不同的。这看起来像这样

<style>
     .cardPad{
        padding: 0 10px;
      }
</style>

你可以在这里看到小提琴。 http://jsfiddle.net/Ukp6z/2/

如果你一直在使用边框，尽管不是正确的方法 -

然后使用

<style>
     .cardPad{
       border:10px solid transparent;
       border-bottom:0;
       border-top:0;

      }
</style>

这将产生与此处http://jsfiddle.net/Ukp6z/3/

相同的效果

Answer 4

像Rahul写的那样，你需要为你的头脑中的“cardPad”类设置样式。

<style type="text/css">
    .cardPad{
    padding-right: 10px;
    }
</style>

我复制了您的代码并上传到我的服务器，我相信这一改变会给您带来您想要的效果。

Answer 5

您可以在商品上使用一个（或多个）以下CSS属性吗？

margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left

e.g。

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

此页面有更多信息 - ＆gt; http://www.htmldog.com/guides/css/beginner/margins/

Answer 6

代码错误（需要样式而非脚本标记）和整体间距应由padding或margin而不是border定义，但将<script type="text/css"></script>标记替换为这应该有效：

<style>
.cardPad {
    border-left:10px solid rgba(0,0,0,0);
    border-right:10px solid rgba(0,0,0,0);
}
</style>

图像上的隐形边框

6 个答案: