жидкие изображения в один ряд - PullRequest
Новая
       0

жидкие изображения в один ряд

1 голос
/ 18 февраля 2012

Я наткнулся на крошечную проблему, которую по какой-то причине не знаю, как ее решить.Это может быть один из тех случаев, когда это выглядит просто, но невозможно реализовать.Вот проблема:

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

Хитрость для уменьшения изображения заключается в добавлении img {max-width: 100%;} в файле CSS, но это не сработает в этом случае.Я хотел бы спросить, если кто-нибудь знает простое решение этой проблемы?Я мог бы попытаться установить максимальную ширину для каждого изображения на различное число в зависимости от их ширины, но я боюсь, что вычисления будут отключены в некоторых браузерах (мы все знаем, как некоторые браузеры обрабатывают проценты с десятичными знаками).

Заранее спасибо

Неработающий пример: 

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

Комментарии: идеально подходит для одного изображения, поэтому я ищу что-то простое для нескольких изображений.

Рабочий пример: 

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

Комментарии: расчет ширины в процентах - это боль, и я не уверен, будет ли она работать даже во всех случаях.

1 Ответ

3 голосов
/ 18 февраля 2012

Я думаю, вы будете сражаться в тяжелом сражении, если попытаетесь сделать все это в течение одного деления. Простое, надежное решение - использовать стол. Вы также можете сделать это с помощью набора элементов div, которые приближаются к таблице.

http://jsfiddle.net/chad/uSrYx/ - таблицы

http://jsfiddle.net/chad/uSrYx/1/ - элементы div, маскирующиеся под таблицы

http://jsfiddle.net/chad/uSrYx/2/ - немного другой эффект с div-строками inline-block внутри пустого пространства: контейнер nowrap. Возможно, только если вы заранее знаете, сколько изображений в каждом ряду

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

...