antd row col div高度不一致的解决方法

5,480 阅读1分钟

通过div底部的margin和padding实现,缺点:下边框无法完整显示,建议在无边框情况下使用

.ant-row{
    overflow: hidden;
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

来源链接:blog.csdn.net/jewely/arti…

需要实现以下效果:

.ant-row {
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;

    .ant-col.text-col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
    
<Row gutter={16}>
    <Col className="text-col"
         span={9}>
        <div>1、xxx</div>
        <div>3、xxx</div>
    </Col>
    <Col span={6}>
        <img src="xxx.png"
             alt="图片"/>
    </Col>
    <Col className="text-col"
         span={9}>
        <div>2、xxx</div>
        <div>4、xxx</div>
    </Col>
</Row>