CSS - 高さが同じで、幅と幅が同じである列

Question

の高さがの列を2つ作成しようとしていますが、％の幅がに設定されています。

いずれかの列には、縦に並べる必要のあるテキストがあります。 display: table-cellを試しましたが、の幅をに正しく設定できませんでした。

この画像は私が達成しようとしているものを示しています

任意のアイデア？

Answer 1

CSS Flexboxを使用できます。

.box { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.box img { 
 
    flex: 0.6; 
 
} 
 

 
.box .text { 
 
    flex: 0.4; 
 
}

<div class="box"> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quis hic suscipit recusandae ad veritatis dolorem expedita placeat rerum architecto provident ipsa, consequuntur, assumenda vitae explicabo sapiente laboriosam cum cupiditate.</div> 
 
</div>

・ホープ、このことができます：以下のスニペットを見て！

Answer 2

より良いブラウザのサポートのために、あなたはdisplay: table;使用することができますし、display: table-cell;

.outer { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    height: 200px; 
 
} 
 
.sixty { 
 
    width: 60%; 
 
    background-color: gray; 
 
} 
 
.forty { 
 
    width: 40%; 
 
    background-color: pink; 
 
}

<div class="outer"> 
 
    <div class="inner sixty"> 
 
    this is an image<br> 
 
    width = 60% 
 
    </div> 
 
    <div class="inner forty"> 
 
    this is some text<br> 
 
    width = 40%<br> 
 
    text = vertically alligned 
 
    </div> 
 
</div>