html - 如何使用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 属性做的。希望这对你有帮助..谢谢

.bbb{
    text-align: center;
    /* bottom: 20px; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.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;
  position: relative;
}
.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>