Have Geek Brain

Place multiple fixed width / width and width blocks by 2 columns

I will try to explain this as best I can. I have several divs that are fixed width but variable height. I want to fit these fields in two columns inside a fixed width container. What happens when you give them all float: left value, I get something like this:

######### ######### 
# box 1 # # box 2 # 
######### # ..... # 
......... # ..... # 
......... ######### 
######### ######### 
# box 3 # # box 4 # 
# ..... # # ..... # 
######### #########
######### #########
# box 5 # # box 6 #
# ..... # #########
# ..... #
#########

(Periods are a gap)

What I really really liked was the top of box 3 to touch the bottom of box 1. Any easy way to achieve this?

Edit: I would like to find a solution that works for more than two columns. The ideal soution woudl works with a resilient layout and extends to as many columns as would fit horizontally on the screen.

+2


a source to share


2 answers


You need to alternately move the left and right margins to your margins.

  .box:nth-child(2n+1){
    float: left;
  }
  .box:nth-child(2n){
    float: right;
  }


A warning that this code is incompatible with older browsers, for those to whom you might program different CSS classes in every other field.

+3


a source


Work vertically instead of horizontal.

Now:

LR
1 ==> 2
3 ==> 4
5 ==> 6


Another way:

LR
12
\ / \ /
3 4
\ / \ /
5 6

So, put all the odd divs in the left column, all the even divs in the right column. If you create these divs dynamically, first group them odd and even, then add them to the appropriate column.

0


a source






More articles:


All Articles