Изображение сверху многостолбцовой разметки с помощью CSS - PullRequest
Новая
       13

Изображение сверху многостолбцовой разметки с помощью CSS

0 голосов
/ 18 января 2011

У меня есть макет с двумя столбцами (с использованием модуля CSS с несколькими столбцами), и я хотел бы иметь изображение в верхней части второго столбца. Кажется, я должен сам разместить изображение так, чтобы оно было в том месте текста, где будет разрыв.

Проблема в том, что я хочу, чтобы столбцы также были равномерно заполнены.

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

.col-2 {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
    width:800px;
}

.block {
    width:100%;
    height:100px;
    background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.

Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.

Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
    <div class="block"></div>
</div>

Ответы [ 3 ]

2 голосов
/ 19 января 2011

Спецификация CSS3 имеет стиль «разбивка столбцов», но она реализована только в Webkit.Он будет делать именно то, что вы ищете, но, к сожалению, только в Safari и Chrome.

Вам нужно, чтобы элемент разрыва столбца попал в нормальный поток вашего контента, и добавьте следующий стиль: 

div.block {
  width: 100px; /* this shouldn't be more than your column width */
  height: 100px;
  -webkit-column-break-before: always;
}

Пример (просмотр в Safari / Chrome)

http://css -infos.net / property / -webkit-column-break-before

http://www.w3.org/TR/css3-multicol/#column-breaks

1 голос
/ 18 января 2011

Вы можете заключить два div в другой div и иметь .block div перед .col-2 div в вашей разметке.

Пример для вас здесь .

0 голосов
/ 19 января 2011

Если я понимаю, что вы пытаетесь сделать (сделать div или изображение полным из всех столбцов), то способ сделать это с помощью CSS - это указать column-span: all;на элементе (img или div) вы хотите охватить всю ширину.Однако в настоящее время это поддерживается только в Opera и только во внутренней сборке (надеюсь, у нас скоро будет публичный релиз).

Без использования span-span-столбца вам придется полагаться на сценарий или перемещать метку вверх, чтобы выйти за пределы элемента, к которому вы применяете count-столбец.

...