Список изображений в таблице HTML, используя «float: left»

Question

У меня есть несколько изображений очень разной высоты и ширины, которые необходимо отобразить в диалоговом окне веб-приложения.

Размещение изображений в таблице выглядит не очень хорошо, поскольку некоторые очень широкие изображения растягивают весь столбец, что приводит к смешному результату.

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

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

Единственный способ обойти это, что я вижу, - это программно вычислять ширину каждого изображения (используя PHP или Javascript), а когда горизонтальное пространство заполнено, ввести clear: both. Однако это довольно ресурсоемкий процесс, и мне бы хотелось решить это без него.

Есть ли способ добиться этого с помощью чистого CSS?

Достаточно ли ясен и понятен мой вопрос? Если нет, пожалуйста, прокомментируйте, и я уточню.

Редактировать: Спасибо за ваши вводные люди. Использование display: inline на изображениях работает нормально. Это добавляет несколько других проблем, но в принципе это путь.

Answer 1

Дисплей

: встроенные изображения позволят им перейти к следующей строке на основе фиксированной ширины контейнера

Answer 2

Подумайте над тем, чтобы заставить их работать в форматах миниатюр с фиксированной шириной / высотой и добавить ссылку / клик для отображения полного изображения в диалоговом окне.

* 1003 Е.Г. *

<img src="img1.jpg" width="100" height="75" onclick="window.open('img1.jpg')">
<img src="img2.jpg" width="100" height="75" onclick="window.open('img2.jpg')">
<img src="img3.jpg" width="100" height="75" onclick="window.open('img3.jpg')">
...

Вы могли бы даже использовать лайтбокс , чтобы иметь хорошую презентацию слайдов / авторазмера.

Answer 3

К сожалению, нет, вам придется использовать сценарии на стороне сервера или на стороне клиента для решения этой проблемы.