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

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并将其与底部对齐，但我需要在不使用"绝对"定位的情况下实现这一点，只在所有元素上使用"相对"定位。

我不能使用"absolute"，因为它凌驾于其他元素之上。

Answer 1

你可以这样使用flexbox:

这里有一个从你的派生的JSFiddle

#main {
    margin: auto;
    width: 300px;
    display: flex; /*added*/
}
.image {
    background-image: url(http://www.todopuertas.net/images/conoce.png);
    height: 100px;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 100%;  /*added to bottom align the img*/
}
.column1 {
    float: left;
    width: 100px;
    position: relative;
    align-self: flex-end; /*added to aligned to bottom*/
    border: 1px solid; /*to show that is aligned*/
}
.column2 {
    float: right;
    right: 0;
    width: 150px;
    position: relative;
    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>

Answer 2

查看我更新的小提琴。基本上，我删除了浮动，并通过将它们设置为inline-block元素将元素设置为底部对齐。