Geek Answers Handbook

Fluid Width with Equidistant DIVs + Last Line Left Aligned

I have fixed width fields in liquid layout and text alignment: justify them using this published solution:

Fluid Width with Equidistant DIVs

But since I have a few more lines in a flexible layout.

This of course happens:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------          ------        ------    
|    |          |    |        |    |   
|    |          |    |        |    | 
------          ------        ------

But I like to have it like this:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------   
|    |    |    |    |    |  
|    |    |    |    |    |
------    ------    ------

Of course, does this justify the work, but is there a solution for this without using javascript for this?

I thought the text-align-last: left might work, but it is not, and it is not official yet.

Idea for a possible solution:

I came up with a possible javascript solution, but for this I need your help.

Here is my idea for a possible solution:

, . , divs .

, , :

, () srcipting:

1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.

, , , javascript. , .

?

, .

: http://jsfiddle.net/L2mPf/

.

. .

+5
3

, css:

divs, ( 4) 1px.

, javascript.

: http://jsfiddle.net/L2mPf/1/

@GGG css .

+7

. , - .

0

css .

.box-class {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

100px, , IE6

( ) , clearfix , , . ( clearfix css )

0

More articles:


All Articles