CSS: неупорядоченное выравнивание списка - PullRequest
Новая
       18

CSS: неупорядоченное выравнивание списка

0 голосов
/ 10 января 2012

Рассмотрим следующую скрипку: http://jsfiddle.net/wNrqu/

Последние 4 часа я пытался сделать что-то вроде этого: enter image description here

Я пытаюсь сделать так, чтобы в списке отображалось по четыре элемента в каждой строке с двумя интервалами по центру под изображением. Текст должен быть в состоянии переносить слова. CSS - один хитрый зверь, которому нужно овладеть!

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

Ответы [ 4 ]

3 голосов
/ 10 января 2012 
<div id="container">
   <div><img src="kitten.png" />Cute Kitten<br />yes</div>
   ......
</div>

Тогда в вашем CSS: 

#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}

Это должно сделать это. Гораздо проще, чем использовать неупорядоченный список, потому что тогда у вас нет стилей, которые по умолчанию есть в списке, которые нужно переопределять.

2 голосов
/ 10 января 2012

Если я делаю этот css, я не буду использовать список заказов, я буду использовать div.Может быть, это вам поможет. 

<div id="container">
<div class="row clearfix">
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p>   <p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
</div>
</div>

тогда в css 

#container {width:1000px;}
.img {width:133px; height:200px; margin-right:20px;}
.img p{text-align:center;}
.fleft{float:left;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
0 голосов
/ 22 марта 2013

Спасибо за помощь ... хотя я изначально не задавал вопрос.
Пока что работает нормально, хотя я хотел все центрировать так:

Я изменил CSS с 

#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}

до: 

#container{margin: 0 auto;width: 1000px;}
#container div {display: inline-block; width: 150px; text-align: center;}
0 голосов
/ 10 января 2012

Пожалуйста, укажите следующее местоположение:

http://jsfiddle.net/wNrqu/

...