css - balanced alternating column layout in CSS3 -


i'm trying create balanced (2-) column-layout.

the content not text blocks , varies in height. content should placed alternatingly left , right, long "left" , "right" have (roughly) same height..

i.e. in image: enter image description here space between 1 , 3's shouldn't there.

or in image: enter image description here 2's should stand alone on right side , 1, 3's , 4 should stand on left side (without space between them).

i tried using "floating <li>'s" this:

html:

<ol class="context">     <li class="gruppe">1</li>     <li class="gruppe">2.0<br />2.1</li>     <li class="gruppe">3.0<br />3.1</li>         <li class="gruppe">4</li> </ol>

css:

ol.context  {   border: 1px solid #048;   list-style: none;   margin: 0;   padding: 0 0 8px 0;   overflow: auto; }  li.gruppe {   background: #048;   color: white;   float: left;   font: bold 32px arial, sans-serif;   margin: 1px;   text-align: center;   width: calc(50% - 2px); }

(see attempt 1 , attempt 2)

i have tried use column's (column-count: 2; column-fill: auto;) not fill columns left-to-right first. (it fills top-to-bottom first.)

is possible without javascript?

i not possible without js. here fiddle made based on article ben holland. @ least me looks after.

http://jsfiddle.net/qwsbj/2/

html:

<body onload="setupblocks();">   <div class="block">     <p>***content***</p>   </div>   <div class="block">     <p>***content***</p>   </div>   <div class="block">     <p>***content***</p>   </div>   <div class="block">     <p>***content***</p>   </div>   <div class="block">     <p>***content***</p>   </div> </body>

css:

.block {   position: absolute;   background: #eee;   padding: 20px;   width: 300px;   border: 1px solid #ddd; }

js:

var colcount = 0; var colwidth = 0; var margin = 20; var blocks = [];  $(function(){     $(window).resize(setupblocks); });  function setupblocks() {     colwidth = $('.block').outerwidth();     colcount = 2     for(var i=0;i<colcount;i++){         blocks.push(margin);     }     positionblocks(); }  function positionblocks() {     $('.block').each(function(){         var min = array.min(blocks);         var index = $.inarray(min, blocks);         var leftpos = margin+(index*(colwidth+margin));         $(this).css({             'left':leftpos+'px',             'top':min+'px'         });         blocks[index] = min+$(this).outerheight()+margin;     });  }  array.min = function(array) {     return math.min.apply(math, array); };

Comments

Post a Comment