3つの列は常に動的コンテンツと同じサイズです

Question

私は動的コンテンツを持つ3つのdivを持ちますが、3つのdivの高さは常に同じである必要があります。 3つのdivのコードは次のとおりです。

<div class="boxcontent3"> 
    <div class="whitebox3"> 
     <div class="whiteboxdemocont"> 
      conten1 
     </div> 
    </div> 
    <div class="whitebox3"> 
     <div class="whiteboxdemocont"> 
      content2 
     </div> 
    </div> 
    <div class="whitebox3"> 
     <div class="whiteboxdemocont"> 
      content3 
     </div> 
    </div> 
</div> 

とCSSスタイル：

.boxcontent3 { 
    display: inline-block; 
    width: 100%; 
} 
.whitebox3 { 
    float:left; 
    background-color: white; 
    border: 1px solid #dfe0e2; 
    -webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 6px; /* FF1-3.6 */ 
    border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 
    margin-top: 20px; 
    margin-right: 10px; 
    margin-bottom: 20px; 
    width: 32%; 
    height: 100%; 
} 

おかげ

Answer 1

ねえ、私はあなたは、CSSこの

などの表示テーブルのプロパティを使用したと思われます

.boxcontent3{ 
    display: table; 
    width: 100%; 
} 
.whitebox3{ 
display:table-cell; 
background-color: white; 
border: 1px solid #dfe0e2; 
-webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
-moz-border-radius: 6px; /* FF1-3.6 */ 
border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 
margin-top: 20px; 
margin-right: 10px; 
margin-bottom: 20px; 
width: 32%; 
height: 100%; 
}​ 

ライブデモhttp://jsfiddle.net/dNmLh/