Question

如何在不使用position: absolute的情况下垂直对齐div？

我创造了小提琴：https://jsfiddle.net/h5c21hmj/14/

#main {
    margin: auto;
    width: 300px;
    height: 200px;        
}

.image {
    background-image: url(http://www.todopuertas.net/images/conoce.png);
    height: 100px;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;

}

.column1 {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    vertical-align: bottom;
}

.column2 {
    float: right;
    right: 0;
    width: 150px;
    position: relative;
    height: 140px;
    background-color: #FFFF00;
}

<div id="main">
    <div class="column1">
        <div class="image"></div>
    </div>
    <div class="column2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet egestas urna. Sed dignissim bibendum ante, sit amet accumsan erat ornare quis. Proin in neque diam. Phasellus rhoncus hendrerit leo, sit amet feugiat ante pellentesque vitae.
    </div>
</div>

我想要做的是获取包含图像的div并将其对齐到底部，但我需要在不使用“绝对”定位的情况下实现它，只对所有元素使用“相对”定位。

我不能使用“绝对”，因为它超越了其他元素。

Answer 1

您可以像这样使用flexbox：

这是一个来自你的JSFiddle分叉

＆＃13;

<div id="main">
    <div class="column1">
        <div class="image"></div>
    </div>
    <div class="column2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet egestas urna. Sed dignissim bibendum ante, sit amet accumsan erat ornare quis. Proin in neque diam. Phasellus rhoncus hendrerit leo, sit amet feugiat ante pellentesque vitae.
    </div>
</div>

＆＃13;

VARCHAR (50)

＆＃13;

Answer 2

查看我更新的fiddle。基本上，我删除了浮动并将元素设置为对齐底部，方法是将它们设置为inline-block元素。

CSS - 如何在不使用“position：absolute”的情况下垂直对齐div？

2 个答案: