如何使用css将div的内容与底部对齐？答案

【问题标题】：How to align content of a div to the bottom with css?如何使用css将div的内容与底部对齐？
【发布时间】：2022-02-06 21:38:31
【问题描述】：

如何使用 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>

它不像我想的那样工作。我做错了什么？

感谢任何帮助

【问题讨论】：

也许您正在寻找这个？ stackoverflow.com/questions/5288336/put-text-at-bottom-of-div

标签： html css css-grid

【解决方案1】：

我是使用位置属性做到的。希望这对你有帮助..谢谢

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

【讨论】：

【解决方案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%; 行将红色框强制置于灰色框的底部。

【讨论】：

【解决方案3】：

position: absolute 等其他样式不适合我。使用 css flex-box 和 grid 是对齐项目的一些最简单的方法。

我确实对 html 做了一点改动，即在左右分开的 div 上制作内容 CSS

<!DOCTYPE html>
<html>
<body>
<style>

.widgethost{
background-color:green;
display: flex;
flex-direction: row;
justify-content:flex-start;

height:100vh;

}

.parent{
margin: 1rem;
color:white;
display:flex;
flex-direction:row;


display:flex;
flex-direction:column;
justify-content:space-between;

border:5px solid black;

}



a, a:visited, a:hover{
text-decoration:none;
color:black;
}


</style>

HTML


<div class="widgethost">
  <div class="parent aaa">
    <div class="host-woovn">
      AAAAAAAAAAAAAAAAA
    </div>
    <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="parent bbb">
    <div class="host-woovn">
      BBBBBBBBBBBBBBB
    </div>
    <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>  

</body>
</html>

【讨论】：