CSS-3 - Как я могу разместить пробел над двумя колонками? - PullRequest
Новая
       2

CSS-3 - Как я могу разместить пробел над двумя колонками?

2 голосов
/ 17 июля 2011

Я знаю, как создавать столбцы с помощью CSS.

Но может кто-нибудь сказать мне, как мне сделать, как показано на рисунке? enter image description here

Пробелы охватывают последние два столбца.

1 Ответ

1 голос
/ 17 июля 2011

Единственное решение, которое я могу изобразить, это использовать два элемента в элементе, который содержит текст.Тогда использование float:right может показаться единым целым.Если вы хотите расположить изображение или другое div выше, вы можете использовать position:absolute.

здесь пример css: 

div {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
    position:relative;
    width:800px;
}

.whitearea {
    width:250px;
    height:200px;
    float:right;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit {height:350px;}
}
img {position:absolute;right:0}

Демо: http://jsfiddle.net/NRFT3/4/

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

...