side by side divs with same height

问题

How can I put the height of side by side DIVs?

When I change the width of browser, sometimes the left div get higher or shorter than the left.

I want that automatically the left or the right div grows up to became with the same height of the other one.

Setting a display table-row is the best solution for this?

Take a look at the image of the page I want to develop. http://i.imgur.com/BhvV2.png

---

I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.

http://jsfiddle.net/tcWCC/47/

回答1:

Here's a solution, also found on SO

http://jsfiddle.net/kaAjW/

Here is the link to original post

How do I keep two divs that are side by side the same height?

The technique is called Faux Columns and here is an article about it

http://www.alistapart.com/articles/fauxcolumns/

回答2:

I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.

http://jsfiddle.net/tcWCC/47/

回答3:

If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/

回答4:

I think you won't be able to do that without using a html table.

来源：https://stackoverflow.com/questions/10517829/side-by-side-divs-with-same-height