Geek asks and answers

Equal Height Elements with CSS

I read about several different solutions for simulating columns or elements of equal height, but none of them caught my attention because they used hacks, incredibly complex HTML layouts, or didn't get widely supported attributes.

Here is a Fiddle example .

My goal would be to make sure that all elements have the same height, or at least the maximum height of siblings in a row.

A string consists of three elements (in this case there is no shell of strings, but I can consider adding such a container element).

Is there a solution that:

+5
3

: , .

edit: : . ( 90- )

+5

CSS3 flex. :

CSS

.parent{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width:100%;
    min-height:200px;
}

.parent div{
    background:red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    border:2px solid green;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

http://jsfiddle.net/VkPmg/2/

+5

, . , , -y .

, 400 3 100 (, ), 1x400, . x 1 , . !

With this technique, your box will not have the same height (in fact), but the display will look like it has a box, because a taller box will push the container and the background will be displayed.

+1
source

More articles:


All Articles