Проблемы с новой строкой CSS - PullRequest
Новая
       5

Проблемы с новой строкой CSS

2 голосов
/ 11 июня 2010

Я пытаюсь создать шаблон breezebrowser (используется для локального создания галерей изображений, вывод HTML). Я взял HTML из моего шаблона WordPress и сумел сгенерировать следующую галерею http://uploads.peasyphotos.com/20100607t-candids/gallery/, но каждое изображение выходит на новую строку, и я не знаю почему, я предполагаю, что это в CSS. Что я должен искать в CSS, чтобы попытаться остановить это, или что я могу поместить в свой шаблонный код, чтобы отключить CSS для этой части?

Спасибо

Ответы [ 5 ]

1 голос
/ 11 июня 2010

Итак, у меня есть для вас возможный ответ.

Сначала вы должны добавить эти CSS-стили к тегу изображений: 

display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;

Работает с Firefox3,6.Я не уверен, будет ли это работать с Ore Lovley IE: P

Я надеюсь, что смогу помочь!

0 голосов
/ 11 июня 2010

Во-первых, я бы порекомендовал проверить ваш HTML .

Во-вторых, я бы предложил поместить изображения в какой-либо элемент контейнера: возможно, неупорядоченный список. Существуют серьезные проблемы с доступностью, связанные с тем, что ряд ссылок сталкиваются друг с другом, без разделения символов без пробелов.

В-третьих, я бы использовал класс css в списке и стилизовал бы его следующим образом: 

ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}
0 голосов
/ 11 июня 2010

Для элемента привязки, имеющего фотографии, используйте поплавок, как этоЭто позаботится. 

float:left;
0 голосов
/ 11 июня 2010

Ваш родительский тег привязки изображений не имеет правильной CSS.Поместите изображения классов поверх тегов привязки и используйте для них следующую CSS. 

a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
0 голосов
/ 11 июня 2010

В ваших файлах css у вас есть один файл с именем reset.css. В строке № 57 у вас есть одна строка, которая называется блок дисплея. закомментируйте это, чтобы увидеть. не может быть хорошим видом. но изображения не будут идти на следующей строке.

...