CSSによるHTMLの配置

Question

イメージの幅とテキスト列の高さをどのように揃えるには？私は相対的な位置を使用しますが、動作しません。

.bungkus-komentar { 
 
    position: relative; 
 
    background: blue; 
 
    min-height: 100px; 
 
} 
 
.div-komentar { 
 
    width: 85%; 
 
    float: left; 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 
.div-penjawab { 
 
    background: yellow; 
 
    margin: 1px; 
 
    padding: 1px; 
 
    width: 10%; 
 
    height: 50px; 
 
    float: left; 
 
} 
 
.div-penjawab img {}

<div class="bungkus-komentar"> 
 
    <div class="div-komentar">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
</div>

Answer 1

そのような何か？

.bungkus-komentar { 
 
    display:flex; 
 
    background: blue; 
 
    min-height: 100px; 
 
    margin-bottom:5px; 
 
} 
 
.div-komentar{ 
 
    width: 85%; 
 
    float: left; 
 
    overflow:hidden; 
 
    background:green; 
 
} 
 
.div-penjawab { 
 
    background: yellow; 
 
    margin :1px; 
 
    padding:1px; 
 
    width: 10%; 
 
    height: 50px; 
 
    float: left; 
 
} 
 
.div-penjawab img { 
 
}

<div class="bungkus-komentar"> 
 

 
<div class="div-komentar">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div> 
 

 
<div class="div-penjawab"> 
 
<img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
</div> 
 

 
</div> 
 

 
<div class="bungkus-komentar"> 
 

 
<div class="div-komentar">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div> 
 

 
<div class="div-penjawab"> 
 
<img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
</div> 
 

 
</div> 
 

 
<div class="bungkus-komentar"> 
 

 
<div class="div-komentar">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div> 
 

 
<div class="div-penjawab"> 
 
<img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
</div> 
 

 
</div>

Answer 2

あなたが探しているものということですか？

すべての画像と各画像コンテナが含まれている左側のコンテナのテーブルの表示と中間の垂直方向の配置は、テーブル行の表示を使用しました。それがあなたを助けることを願ってください。

.bungkus-komentar { 
 
} 
 

 
.div-komentar { 
 
    height:auto; 
 
    position: absolute; 
 
    width: 85%; 
 
    height:100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    background-color: green; 
 
} 
 

 
.container { 
 
    right: 0; 
 
    position: absolute; 
 
    background-color: blue; 
 
    width: 15%; 
 
    height:100%; 
 
    display: table; 
 
    vertical-align :middle; 
 
} 
 

 
.div-penjawab { 
 
    display: table-row; 
 
    margin: 1px; 
 
    padding: 1px; 
 
    width:100% 
 
} 
 

 
.div-penjawab img {height: 50px;}

<div class="bungkus-komentar"> 
 
    <div class="div-komentar">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui amet esse quas quam laudantium adipisci vel fugit aspernatur. Modi eius, odit dicta sapiente unde mollitia! Ad vero nam sequi culpa. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui amet esse quas quam laudantium adipisci vel fugit aspernatur. Modi eius, odit dicta sapiente unde mollitia! Ad vero nam sequi culpa. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui amet esse quas quam laudantium adipisci vel fugit aspernatur. Modi eius, odit dicta sapiente unde mollitia! Ad vero nam sequi culpa. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui amet esse quas quam laudantium adipisci vel fugit aspernatur. Modi eius, odit dicta sapiente unde mollitia! Ad vero nam sequi culpa.</div> 
 
    <div class="container"> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    <div class="div-penjawab"> 
 
    <img class="img-circle" src="http://bakerhi.com/wp-content/themes/nucleare-pro/images/no-image-box.png" width='100%' height='100%'> 
 
    </div> 
 
    </div> 
 
</div>

ここfiddleです。