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

Я пытаюсь разделить мои 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>

источник

2014-01-05 Journey

вы можете дать скрипка демо? – Nish

@Nish Не уверен, правильно ли я настроил его, но вот он. http://jsfiddle.net/N8pVn/ – Journey

@Journey, пожалуйста, посмотрите мой jsfiddle. Вы должны использовать HTML, а не PHP в jsFiddle. – ChandlerQ

Сначала приложите таблицу стилей в теге <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/

Если вы одержимы на использование границы, хотя и не правильный ПУТЬ

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

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

     } 
</style>

Это даст тот же эффект, как показано здесь http://jsfiddle.net/Ukp6z/3/

источник

2014-01-05 05:55:33

Можете ли вы использовать один (или несколько) следующие свойства 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/

источник

2014-01-05 05:39:13 MikeDub

Я пробовал, он не работает для тега img. – Journey

Хмм, все еще не работает для меня. Я думаю, это потому, что это php, но я не уверен. – Journey

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

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

Приветствия

источник

2014-01-05 05:40:13

Спасибо за ответ, я ценю это, но это не работает для меня. – Journey

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

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

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

источник

2014-01-05 05:48:53 ChandlerQ

Спасибо, это была глупая ошибка, как указывали другие, я попытался сделать CSS

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

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

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

источник

2014-01-05 06:38:25

Я не думаю, что нам нужен атрибут типа в теге стиля, если это «текст/css». Это предполагается по умолчанию. –

В настоящее время это правильно. Я все еще обычно включаю его для целей прямой совместимости. –

неправильно (потребности стиля вместо тег сценария) код и общее расстояние должно быть определено 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>

источник

2014-01-05 07:25:20 PMG

Смежные вопросы