如何使用CSS将div的内容与底部对齐？

Question

如何使用CSS将div的内容对齐到底部

有人可以帮助完成此操作吗？或至少指向正确的方向？

我想要那样

这是我的代码：

.bbb{
text-align:center;
bottom: 20px;
}
.text-wi{
border-top:2px dashed #13aff2;
	padding: 5px 0 0 20px;
}

.haha{
	padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
	padding: 0 5px 0 5px;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}

<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
	– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
	<div class="bbb">	<a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
	BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
	</div></div>

它没有我想要的。我在做什么错了？

感谢您的帮助

Answer 1

我使用position属性做到了。希望这对您有所帮助。谢谢

rails c

Errno::EADDRNOTAVAIL in StaticsController#home
Address not available - connect(2) for "localhost" port 7419

Answer 2

如果您想直接在父元素的底部拥有一个子元素，最简单的解决方案是使用position。

.parent {
   background: #ddd;
   position: relative;
   height: 200px;
   width: 300px;
}
.child {
   background: red;
   position: absolute;
   bottom: 0%;
   left: 50%;
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

<div class="parent">
  <div class="child">
    I'm at the bottom!
  </div>
</div>

此方法还利用2D Transforms将子元素水平居中。如您所见，特别是position: absolute;和bottom: 0%;行将红色框强制到灰色框的底部。