CSS3 столбцы и изображения

Question

Мой пример здесь,

Показывает изображение в центре сгенерированных CSS3 столбцов.Мне нужен текст в столбце справа от изображения, чтобы обернуть вокруг изображения, чтобы оно не отображалось перед изображением.Насколько я понимаю, это не выполнимо в текущем CSS.

Есть ли у кого-то НЕОБЪЕКТИВНЫЙ способ достижения того, что я ищу?

Мне бы очень хотелось добиться этого взгляда здесь,

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

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

Эрик

Answer 1

Без использования JavaScript-хаков, я не верю, что есть какой-то чистый способ CSS сделать это.Существует свойство column-span, которое поддерживается Opera (в настоящее время отсутствует в публичной сборке), но имеет только два значения;нет и все.В настоящее время спецификация не позволяет указывать количество столбцов, что было бы очень полезно.Это то, что я хотел бы увидеть.

Answer 2

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

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

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

Answer 3

Это не точный ответ на ваш вопрос, но по крайней мере есть возможность обернуть текст вокруг изображения внутри одного столбца.Проверьте «Пример X» из здесь .

Answer 4

Вырежьте атрибуты height и width img - они не нужны - и используйте CSS max-width:100%;

Есть некоторые проблемы обратной совместимости (особенно с IE), но они могут быть подключены с JS. Этот метод - будущее.

Полезная статья со ссылками:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

Best

Answer 5

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

Нечто подобное .column { столбцы: 12em; }

.column img { ширина: 10em; }