Невидимая граница на изображениях

0

Я пытаюсь разделить мои 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>
  • 0
    Можете ли вы дать демо скрипку?
  • 0
    @Nish Не уверен, правильно ли я его настроил, но вот оно. jsfiddle.net/N8pVn
Показать ещё 1 комментарий
Теги:
image
border

6 ответов

1
Лучший ответ

Во-первых, приложите таблицу стилей в <style> а не тег <script>.

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

И вам нужно указать стиль границы, который он должен применить. Как "твердый", "пунктирный" и т.д. По умолчанию цвет будет # 000. Для ясности я изменил его на синий.

Для целей заполнения используйте свойство padding/margin, а не border. Для img оба будут давать тот же эффект, однако на самом деле они разные. Что будет выглядеть так

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

Здесь вы можете увидеть скрипку. http://jsfiddle.net/Ukp6z/2/

Если вы чертовски настроены на использование границы, хотя и не правильный way-

Затем используйте

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

      }
</style>

Это даст тот же эффект, что и здесь. Http://jsfiddle.net/Ukp6z/3/

Поделиться
2

Я создал jsfiddle для этого, это то, что вы хотите?

Фактически, вы можете использовать margin или padding для разделения этих <img> s. Я не понимаю, почему вы не можете заставить его работать.

Вам может потребоваться опубликовать измененный код, чтобы мы могли помочь.

Поделиться
  • 0
    Спасибо, это была глупая ошибка, как указывали другие, я пытался сделать CSS <script> вместо <style> lol. Это было одно утро для меня, поэтому я был истощен. Спасибо хоть. :)
1

Как писал Рахул, вам нужно установить стиль для класса "cardPad" в вашей голове.

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

Я скопировал ваш код и загрузил его на свой сервер, и я считаю, что это изменение даст вам тот эффект, который вы желаете.

Поделиться
  • 0
    Я не думаю, что нам нужен атрибут type в теге style, если это "text / css". Это предполагается по умолчанию.
  • 0
    Это правильно в настоящее время. Я все еще обычно включаю это для целей прямой совместимости.
1

Может быть, это:

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

ура

Поделиться
  • 0
    Спасибо за ответ, я ценю это, но это не работает для меня.
0

Код неправильный (требуется стиль вместо тега скрипта), а общий интервал должен быть задан путем 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>
Поделиться
0

Можете ли вы использовать один (или несколько) следующие свойства CSS для своего элемента?

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

например

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

На этой странице есть дополнительная информация → http://www.htmldog.com/guides/css/beginner/margins/

Поделиться
  • 0
    Я пытался, это не работает для тега img.
  • 0
    Хм, все еще не работает для меня. Я думаю, что это потому, что это php, но я не уверен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню