it-swarm.com.ru

CSS: заставить float создать новую строку

У меня есть куча float: left элементов, и некоторые НЕМНОГО больше, чем другие. Я хочу, чтобы новая строка прервалась, и чтобы изображения всплыли влево, вместо того, чтобы застрять на более крупном элементе.

Вот страница, о которой я говорю: ссылка

Если они все одинакового размера, если работает красиво: ссылка

Спасибо! (Я бы предпочел не входить в JavaScript или сценарии на стороне сервера, если мне не нужно)

57
Paul Tarjan

Что ж, если вам действительно нужно использовать объявления float, у вас есть два варианта:

  1. Используйте clear: left в крайних левых элементах - в этом случае у вас будет фиксированное количество столбцов
  2. Сделайте элементы равными в height - либо с помощью скрипта, либо с помощью жесткого кодирования высоты в CSS

Оба они ограничивают, потому что они работают вокруг того, как работают поплавки. Тем не менее, вы можете рассмотреть возможность использования display: inline-block вместо float, что приведет к аналогичной раскладке. Затем вы можете настроить их выравнивание, используя vertical-align.

81
Alex Gyoshev

Я исправил это, удалив float:left и добавив вместо него display:inline-block. Не использовал его для изображений, но там тоже должно работать.

61
David Davepermen Spörri

Используйте display:inline-block

Вы также можете найти vertical-align: top или vertical-align:middle полезными.

5
optimiertes

Это то, что я сделал. Кажется, работает над созданием новой строки, но я ни в коем случае не гуру html/css.

<p>&nbsp;</p>
3
Alex

Вы можете обернуть их в div и задать ширину div (может быть, ширину самого широкого изображения + поле?), А затем плавать в div. Затем установите изображения в центр их содержащих div. Ваши поля между изображениями не будут одинаковыми для изображений разного размера, но они будут размещаться на странице намного приятнее.

2
Evernoob

Добавить в .icons div {width:160px; height:130px;} получится очень красиво

Надеюсь, это поможет

0
Dom

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

Используя float, вы просите браузер автоматически настроить ваши элементы управления. Он отвечает обтеканием, когда элементы управления не соответствуют ширине для их указанного расположения с плавающей точкой. float: left, float: right или clear: left, clear: right, clear: оба.

Так что, если вы хотите, чтобы группа элементов float: left равномерно попадала в один левый столбец, вам нужно разрешить браузеру обернуть/развернуть их на одинаковую ширину. Поскольку вы не хотите создавать какие-либо сценарии, вы можете объединить все элементы управления, которые хотите объединить, в один элемент div. Вы хотели бы добавить новый упаковочный div с классом вроде:

.LeftImages{
    float:left;
}

hTML

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

Этот div будет автоматически подстраиваться под ширину самого большого изображения, и все изображения будут постоянно перемещаться влево с div (без переноса).

Если вы все еще хотите, чтобы они были перенесены, вы можете задать для div ширину, равную ширине: 30% и каждому из изображений float: left; стиль. Вместо настройки самого большого изображения оно будет различаться по размеру и позволит обернуть содержащиеся в нем изображения.

0
codeasaurus