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

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叉子

 #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元素来删除浮动元素并将其元素设置为与底部对齐。