هم اندازه کردن ارتفاع دو div با استفاده از css

با سلام و خسته نباشید خدمت دوستان عزیز،

من چند روز پیش می خواستم دو تا دیو با ارتفاع مساوی بسازم در واقع یکی از آنها عکس بود کنارش نوشته و من می خواستم هم ارتفاع باشند. خییییلی گشتم و در نهایت از  table-cell و table-row و table استفاده کردم. اینها در واقع مقادیر مختلف برای پروپرتی display در css هستند.

کد رو اینجا میارم البته لازم به ذکره که این تنها در IE8 به بالا کار می کنه، اما اگر بخواید می تونید از پروپرتی های مشابه نیز استفاده کنید مثل inline-grid یا inline-block ولی یکم سخت تره کار باهاشون.

همانطور که در کد CSS میبینید ما درون table مستقیماً table-cell قرار دادیم این به این خاطر است که دو ستون داریم برای ستون بیشتر باید سلول ها را درون table-row قرار دهید. به این معنی که یک دیو اضافه می کنید و سلول ها را در آن قرار می دهید.

<div class="row" style="margin-top: 9%;">
    <div class="cell" >
         some text here
    </div>
    <div class="cell" > 
         <img src="picture/resource" />
    </div>                           
</div>

.row {
    width: 93%;
    margin: 3.5%;
    display: table;
    border: 10em;
    -webkit-box-shadow: 0px 1px 2px 0px #000000;
    -moz-box-shadow: 0px 1px 2px 0px #000000;
    box-shadow: 0px 1px 2px 0px #000000;
}
.cell {
    float: none;
    vertical-align: middle;
    display:table-cell;
    width: 8%;
}