All geek questions in one place

CSS / Javascript: multiple columns

I am looking for a columnizer plugin (creating columns of my little divs).

It is very important to have the following functions:

1) It should be as light as possible (if it is only css, it would be great, but I think it is difficult to get it to work with IE then ...)

2) It should be a cross browser (I do not need IE6 ... requires compatibility with IE7 and IE8).

3) Divas should not be broken. In other words, the nodes should be moved to the next block, but not divided by 2. The nodes are div elements, they can include other divs, images, and text.

4) The column must have a fixed width and a fixed margin. This means that when you resize the browser and create new columns (becoming a wider window), the new columns must rigidly maintain the same width and distance between them. (margin: 20px) (width: 200px)

5) The content is dynamic. I use drupal as a CMS. My client can add or remove nodes, so I need a dynamic solution.

It would be great to have some css .. but I'm afraid that I need a jQuery plugin because I need to support all 4 functions.

I found several plugins and css styleshits with very good solutions, but could not find a complete one.

thanks

+4
source share
10 answers

I think you want to use CSS inline-block . This will meet your requirements, as far as I understand them. Each column will be displayed one after another on the page and then, as necessary, wraps to the next row.

CSS

 .col { display: inline-block; /* could add `display:-moz-inline-box` for Firefox 2 compatibility */ vertical-align: top; width: 200px; margin-right: 20px; }

HTML

 <div class="container"> <!-- using span instead of div for IE6 compatibility --> <span class="col">1st block</span> <span class="col">2nd block</span> <span class="col">3rd block</span> <span class="col">4th block</span> </div>

If there are serious problems in IE6-7, you can try ie7.js , which should fix them.

+5
source

How about 1KB Grid CSS Framework ? This is the simplest CSS structure and is very customizable.

An example style sheet is as follows:

 /* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter */ .g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;} .column{overflow:hidden;float:left;display:inline;margin:0 10px;} .row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

And the HTML looks like this:

 <div class="row"> <div class="column g4">...</div> <div class="column g4">...</div> <div class="column g4">...</div> </div>
+3
source

You looked at the jquery-masonry plugin. Automatically creates columns with a fixed width and consistent mark.

Here is a demo

+2
source

I read your list of requirements (but I must admit, I may not have fully understood them), but based on what I understood, I would suggest a jQuery plugin called "Easy List Splitter".

JQuery Plugin: Lightweight List Separator | Andrea Sima Cerniotti

You do not know how many of your requirements this can satisfy, but at least it can serve as a suitable basis for hacking a customized solution.

+1
source

Have you tried this before: http://welcome.totheinter.net/columnizer-jquery-plugin/

I used it before and found it very easy to set up - but obviously YMMV :)

+1
source

Just float they are all left . Works in all browsers from IE6 onwards.

Here is SSCCE .

 <!doctype html> <html lang="en"> <head> <title>SO question 2795266</title> <style> .nodes div { float: left; width: 200px; margin: 10px; /* Or set right and bottom to 20px. */ border: 1px solid black; /* Just for visibility. */ } </style> </head> <body> <div class="nodes"> <div>node</div> <div>node</div> <div>node</div> <div>node</div> <div>node</div> <div>node</div> </div> </body> </html>
+1
source

It looks like you are looking for a mesh for nodes. Take a look at this table view in Drupal . Basically the key idea is to use an inline-block div to create the columns you want.

If you do not need vertical spaces between spaces (so that they look like columns), do not set margin-bottom , as shown in the example, or do not set it to margin-bottom: 0 . You can also create column rows by adding left and right borders using CSS: border-left: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-right: 1px solid black;

In addition, you must use Views in Drupal for this. Although not required, it gives you more control over the display.

0
source

In other words, the columns must be dynamic. If the browser window is small, I have several columns, if it I have many columns - Patrick May 9 at 17:28

im not sure if you can accomplish this with css only as you are adding element deletion and content stream. I think you have to resort to JS

0
source

There are tons of jQuery plugins that specifically distribute content across multiple columns:

In addition to the jQuery plugin: Easy Splitter | Andrea Cima Serniotti , which I already mentioned in the previous answer, has the following:

One of them should do the trick.

0
source

Then you need the jquery masonry plugin.

Go to my test site - http://jasondaydesign.com/masonry_demo

You will see that I have two different sizes (widths) of boxes that lie around each other. You can do this with one column size instead, only for the purposes of my sandbox I played with two.

When you resize the browser, the windows will be rebuilt accordingly.

This is a brilliant script.

Good luck

0
source

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

More articles:


All Articles