All geek questions in one place

CSS vertical stack

I currently have a bunch of inline-block div stacked horizontally. When the container is full, they nicely spill onto the following line: enter image description here

Is it possible to do the same vertically without changing the HTML? enter image description here

In order to generate this image, I had to move each column into a div container. I cannot change the original HTML, so this is not an option.

CSSDesk

+4
source share
2 answers

CSS2
Alas, as far as I know, this is not possible with pure CSS and HTML. I know there is a jQuery Masonry plugin that does this pretty well though.

CSS3
Using CSS3 Multi-column Layout Mode , you can achieve the layout of the question (although it will not have as many options as the aforementioned brickwork). IE support ranges from 10 to, and I think you might also need some browser prefixes. A version without a prefix will look something like this (on your container):

 column-count: 3; column-gap: 10px; width: 480px;

Above was adapted from this blogpost , which refers to this demo (although there are others too ).

+6
source

Depending on browser support, you may use column-count .

+2
source

Source: https://habr.com/ru/post/1397972/

More articles:


All Articles