html - 我怎样才能让 Angular 落里的 img 齐平？

Question

目前我的这张卡片的 img 看起来像这样:jsFiddle

这是 reactjs 组件的一部分:

<div className='col-lg-4 emp-row'>
                        <div className="col-lg-4">
                            <img src={this.props.details.avatar} alt=""/>
                        </div>
                <div className="col-lg-8">
                            <div>
                            <span className='name'> {this.props.details.firstName} &nbsp;
                                {this.props.details.lastName}</span>
                            <div>
                                    {this.props.details.bio.slice(0, 80)}
                            </div>
                            </div>
                </div>
</div>

请注意 img 周围有空格吗？我试图改变高度，但没有帮助。

如何让 img 像这样显示:？

Answer 1

您需要移除 img 容器周围的填充:

.emp-row {
    display: flex;
    flex-direction: row;
    /* padding: 10px 0;     <--- remove */
    border: 1px solid black;
}
.col-lg-4 {    
    position: relative;
    min-height: 1px;
    padding-right: 15px;
   /* padding-left: 15px;    <--- remove  */
}

https://jsfiddle.net/ss1syudL/5/