Geek Answers Handbook

CSS3 columns Block specific columns (columns)

I have a div divided into three columns using CSS3

.div {column-count: 3;}

This div contains a line of text that fills part of the columns.

Can anyone think of a way to block one or more of these columns?

So, for example, the first column is locked and the text starts at the top of the second column.

The height of the div is unknown and is changing.

the div is also content.

+4
source share
2 answers

The way I ended this was, if I wanted to lock the left column, I would apply padding-left equal to one column width, strip width equal to one column width and change column-count to 2.

If I wanted to lock the middle column, I would change column-count to 2 and set column-gap equal to the width of one column plus the existing space in the column.

+1
source

You can use CSS Blueprint. This is an environment that can be used to easily create complex multi-column layouts.

http://www.blueprintcss.org/

This link can help you get started: http://www.cssbakery.com/2012/06/using-blueprint-css-framework.html

In addition, the column counter only works in the statement. For Firefox, it supports -moz-column-count, while Chrome and Safari support -webkit-column-count.

Godspeed

+1
source

More articles:


All Articles