Эквидистантно расположенные div с процентами для адаптивного дизайна

Рабочий пример и JS Fiddle

Попытка придумать решение для этого, которое создает ul li список, который отображает элементы, расположенные на одинаковом расстоянии друг от друга, но с использованием процентов.

Решение должно быть способным работать быстро, то есть блоки (изображения с наложенным текстом) будут уменьшаться как по размеру, так и по пространству между ними до размера iPad. При обычном разрешении мобильного телефона они будут складываться.

Существует три элемента, но преимущество использования процентов состоит в том, что можно добавить дополнительный элемент без необходимости переделывать большую часть CSS. Надеюсь, блоки (в этом случае li пункты) будет просто настроить их размеры и пространство соответственно.

Я попытался поиграть с некоторыми эквидистантными трюками CSS здесь, но они не очень подходят для отзывчивости.

Я планирую использовать max-width:100% сделать так, чтобы размер изображения был увеличен до максимальной ширины текущего li так что большие изображения могут использоваться без необходимости изменения размера (экономит время при обмене изображениями и означает, что это же изображение можно использовать в другом месте на сайте)

li список не нужно использовать, будет открыт для использования простого div или же span состав.

Есть идеи?

Первая проблема: в моем примере JS Fiddle вы можете видеть, что изображения выравниваются и изменяют размер в зависимости от размера окна. Однако самый дальний правый элемент не совпадает с правым краем (все они обычно выровнены по левому краю). Хотя я добавил text-align:justify это, кажется, не имеет желаемого эффекта

Вторая проблема: проблема неразделимости трех - это проблема. 30% - это не настоящая треть, а 33%, похоже, вытесняют это.

Третий выпуск: пробелы. Есть ли способ остановить злые пробелы между liЭто размещены на разных линиях? Должен ли я жертвовать читабельным HTML, чтобы избавиться от пробелов?

HTML:

<div id="bottomWide">
    <ul>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    </ul>
</div>

CSS:

bottomWide {

width:85%;
margin:0 auto;
border:1px solid red;}

bottomWide ul {

margin:0;
padding:0;

}

bottomWide li {

list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;

}

bottomWide img {

max-width:100%;

}

Медиа-запрос для стекирования (работает хорошо)

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
    #bottomWide li{
    display:block;
    width:100%;
}
}
Источник

1 ответ

Решение

Это один из способов:

http://jsfiddle.net/YT3KZ/3/

Я изменил жизнь на float:left; скорее, чем display:inline-block; и добавил margin-left: 1%; и сделал ширину 32,333%, чтобы компенсировать запас в 1% и распределить его по div.

Это поместит li с полем в 1% слева и обрежет 1% справа, так что вам нужно противостоять этому с отрицательным полем ul, или вы можете добавить позиционный класс для этого.

margin-left:-1%;

Другой способ сделать это - сделать контейнер шире, чем ширина вашей страницы, чтобы они правильно позиционировались и использовали отрицательное поле / отступ, чтобы компенсировать часть, которая будет обрезана.

PS. просто заметил, что вы не хотите разрыв... удалить 1% margin и изменить его li в 33.333%

http://jsfiddle.net/YT3KZ/7/

Примечание: я не удалил CSS, который не требуется. Например text-align:justify; так что вы можете очистить его.

Источник
Другие вопросы по тегам