У меня есть группа элементов float: left, а некоторые из них ТАКЖЕ больше, чем другие. Я хочу, чтобы новая строка сломалась, и изображения будут плавать полностью влево, вместо того, чтобы застрять на более крупном элементе.
Вот страница, о которой я говорю: ссылка
Если они имеют одинаковый размер, если они работают красиво: ссылка
Спасибо! (Я бы предпочел не входить в скрипты javascript или на стороне сервера, если мне это не нужно)
Ну, если вам действительно нужно использовать объявления float, у вас есть два варианта:
clear: left для самых левых элементов - con - это то, что у вас будет фиксированное количество столбцов.height - либо с помощью script, либо путем жесткого кодирования высоты в CSSОба эти ограничения ограничены, потому что они работают, как работают поплавки. Однако вы можете использовать display: inline-block вместо float, который достигнет аналогичного макета. Затем вы можете настроить их выравнивание с помощью vertical-align.
Я исправил его, удалив float:left и добавив вместо него display:inline-block. Не использовал его для изображений, но должен работать нормально, там тоже.
Используйте display:inline-block
Вы также можете найти vertical-align: top или vertical-align:middle полезным.
Это то, что я сделал. Кажется, нужно работать над форсированием новой строки, но я не гуру html/css в какой-либо мере.
<p> </p>
Вы можете обернуть их в div и предоставить div ширину набора (ширина самого широкого изображения + маржа, возможно?), а затем плавать div. Затем установите изображения в центр их содержащих div. Ваши поля между изображениями не будут согласованы для изображений разного размера, но они будут отображаться намного лучше на странице.
Добавьте к .icons div {width:160px; height:130px;} .icons div {width:160px; height:130px;} получится очень красиво
Надеюсь, это поможет
Скорость - пустая трата времени. Я видел все эти доказательства, видео и демонстрации на веб-сайте, посвященном скорости, о том, как скорость лучше, чем jquery, и поэтому на меня оказали влияние, и я решил добавить скорость в свой проект и заменить все живые экземпляры моего проекта на скорость... потом я понял, что скорость: 1) глючит (даже последняя версия 2.0.5.. я сам отлаживал некоторый код) 2) не быстрее, чем jquery, как он утверждает (я проверял себя и анимацию jquery) было плавнее, а скорость не такая плавная)
тот парень, который писал скорость, может быть под каким-то давлением, чтобы показать результаты своих профессоров или что-то в этом роде... или, возможно, создал его для того, чтобы создать репутацию или какую-то презентацию, чтобы убедить инвесторов в чем-то..
я обычно не хочу писать о вещах или своем опыте... но эта скорость тратит впустую много моего времени... и поэтому я делаю это для того, чтобы люди знали об этом, чтобы их время не было потрачено впустую, как у меня.
Это старый пост, и ссылки больше не действительны, но, поскольку он появился на раннем этапе поиска, который я делал, я решил прокомментировать, чтобы помочь другим лучше понять проблему.
Используя 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; стиль. Вместо настройки самого большого изображения оно будет различаться по размеру и позволит обернуть содержащиеся в нем изображения.