css колонки, такие как газета и div с медиа

Question

Я пытаюсь найти решение, чтобы иметь возможность кодировать что-то вроде прикрепленного изображения через css, js или php.

Я хочу иметь три столбца для моих статей.И в дополнение к 2 последним колонкам один дополнительный div для медиа статьи.

Ссылки с учебниками или трюки с позициями CSS для этого бесценны!

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

ссылка на изображение: http://my.greview.gr/css_newspaper.png

---

Это нормально для этого решения часть колонизации, и в этом случае я не забочусь о браузер-кросс, но проблема здесь в том, как я могу настроитьрасположение медиа-элемента над двумя последними столбцами и предотвращение наложения текста основной статьи!

Answer 1

Если вы используете современные браузеры, вы можете использовать column биты из css3

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Подробнее здесь: http://www.quirksmode.org/css/multicolumn.html

---

Один из способов заставить его работать с изображением в двух столбцах - это сделать следующее:

1. установить wrapper div, дать ему position:relative

2. установите multicolumn div, дайте ему fixed ширину

3. добавьте две проставки spans, по одной для каждого столбца, для которого вы хотите, чтобы изображение охватывалось. Установите их на display: block. NB вам нужно будет изменить их положение в содержимом, чтобы освободить место в верхней части.

4. используйте position:absolute, чтобы установить изображение на место.

Обычно вы используете column-span и выбираете число ... но это не поддерживается ни в одном браузере, о котором я знаю. (Они поддерживают только all или none).

CSS

div#wrapper{
    width:500px;
    border:1px solid red;
    padding:1em;
    position:relative;
}

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-width:100px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-width:100px;
    column-count: 3;
    column-gap: 20px;
    column-width:100px;
}

div#img{
    height:70px;
    width:350px;
    border:1px solid green;
    position:absolute;
    right:10px;
}

span.bg1{
    width:100%;
    height:100px;
    display:block;
}

Пример: http://jsfiddle.net/jasongennaro/HgmKg/2/

Answer 2

Классический ответ на ваш вопрос - CSS Columns. Это уже обсуждалось в другом ответе. Это дает вам возможность разделить блок на столбцы.

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

Это может быть возможно с помощью CSS-столбцов - я должен признаться, что я не пробовал, но можно заставить текст нормально обтекать графику, поэтому я не понимаю, почему это не может быть возможно с Столбцы, так как они должны работать как любой другой блок, кроме расположения текста внутри него.

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

Подробнее об этом можно узнать здесь: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

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

Это хорошая новость.

Плохая новость заключается в том, что в настоящее время CSS Regions практически не поддерживают браузеры. См. CanIUse для полной информации о поддержке браузера. Как видно из таблиц по этой ссылке, она поставляется в нескольких браузерах, но даже после ее реализации у нее не будет достаточной поддержки со стороны пользователей, чтобы ее можно было использовать.

Какой позор, потому что это именно то, что вы ищете.