Пытается равномерно распределить изображения с помощью css

Im пытается создать слайд небольших изображений, а на каждом слайде изображения равномерно распределены по горизонтали. Найден interesting technique на css-tricks.com и очень strathforward working example, но я не смог его повторить.Пытается равномерно распределить изображения с помощью css

Вот HTML слайда

<div class="item active"> 
    <div> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    </div> 
</div>

Вот CSS следующий Упомянутый Техника

div.sites .carousel-inner .item div { 
    font-size: 0.1px; 
    text-align: justify; 
} 

div.sites .carousel-inner .item div:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

div.sites .carousel-inner .item div a { 
    display: inline-block; 
}

Вы можете увидеть код работает в нижней части this site, под названием «OTROS Sitios»

EDIT: Моя подруга попробовала my code in CodePen, и это сработало красиво. Я предполагаю, что это должен быть какой-то глобальный стиль, который мешает ему.

Спасибо за вашу помощь

источник

2013-05-08 kumiau

Трудно сказать, что вы просите, но изменения 'выравнивания текста: justify' to 'text-align: center' делает список изображений 100x100 все центрированным ...? После этого слайдер работает очень хорошо. – mash

То, что я пытаюсь сделать, - это равномерно распределить изображения в горизонтальном пространстве. Например, когда вы оправдываете текст, который все слова распространяются по всей линии. Вы можете проверить рабочий пример в вопросе, чтобы увидеть демонстрацию того, что я пытаюсь сделать. – kumiau

Я скопировал HTML структуру, начиная с Div сайтов и вставить его на CodePen наряду с предложенным кодом CSS. Я видел, что вы пропустили экранирующий символ между </a> и <a>

Когда я добавил его, код работал отлично :)

источник

2013-05-08 19:49:23 ZePoLiTaT

Пытается равномерно распределить изображения с помощью css

ответ

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