CSS3 многостолбцовый макет и размер изображения

Question

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

div#column {
        margin-left:20px;
        -moz-column-width: 250px;
        -moz-column-gap: 20px;
        -webkit-column-width: 250px;
        -webkit-column-gap: 20px;
        height: 850px;
      }

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

Answer 1

Теоретически есть column-span, однако в настоящее время он не поддерживается ни одним браузером.

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

Может быть, есть библиотеки JavaScript, которые могут это сделать ...

Answer 2

Я попросил @Krishna опубликовать этот вопрос со времени нашей другой сессии вопросов / ответов Увеличение размера шрифта с помощью JavaScript для фиксированных плавающих изображений в столбцах CSS получалось не по теме, то есть это было решено, и это изображениеохват нескольких столбцов оправдал новый вопрос.

Итак, мои мысли пока ...

column-span работает для меня в Webkit (Chrome12).Посетите демонстрационную страницу quirksmode .Однако плохая новость заключается в том, что это не помогает решить эту проблему, поскольку изображение, которое должно охватывать несколько столбцов, все еще обрезается на column-width, поэтому я не думаю, что это решение.

Пока что я думаю, что единственное решение - это сделать колонки самостоятельно в JavaScript, или, возможно, попробовать и использовать / изменить плагин jQuery для колонизатора .

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

Уже есть много JavaScript для увеличения / уменьшения вашего шрифта (другой вопрос, см. моя скрипка ) было бы замечательно, если бы CSS поддерживал это изначально.Все, что нам нужно, это большой Йода , чтобы вылиться во второй столбец :-)

Так что я думаю, что единственное решение в настоящее время:

1. Для каждого изображениякоторая больше ширины столбца, определите, сколько в следующем столбце будет (включая column-gap)
2. Добавьте разделитель, плавающий <div> в следующем, где изображение должно перекрыватьсячтобы слова правильно продолжали течь вокруг и под изображением
3. Абсолютно расположите копию изображения поверх.

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

Answer 3

Добавьте ширину к вашему div и добавьте этот стиль

column-count:3;
-moz-column-count:3;
-webkit-column-count:3;

См. Ссылку: >>

Answer 4

Положение использования: абсолютное, вот так:

#image {
    position:absolute;
    top:300px; //distance from top
    left:200px; //distance from left
    width:600px; //image width
    height:400px; //image height
}