Как выровнять содержимое div с основанием css?

Question

Как выровнять содержимое div с основанием css

Может ли кто-нибудь помочь завершить это? Или хотя бы указать верное направление?

Я так хочу

Это мой код:

.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.

.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-преобразования для горизонтального центрирования дочернего элемента. Как вы можете видеть, красное поле выдвигается к нижней части серого поля, в частности, строками position: absolute; и bottom: 0%;.

Answer 2

Я сделал это, используя свойство 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>