html – 将d性项目固定到容器的底部

概述我有4个块,标题,描述和按钮. 我希望将标题和描述保持在顶部,并且无论描述或标题有多长,按钮都要在底部对齐. 我还需要保持相同的HTML结构. 我实际需要的示例图片： 有人可以弄清楚吗？到目前为止,我还没有在互联网上找到解决办法. /* FLEXBOX RELATED */.grid { display: flex; justify-content: space-between; f 我有4个块,标题,描述和按钮.

我希望将标题和描述保持在顶部,并且无论描述或标题有多长,按钮都要在底部对齐.

我还需要保持相同的HTML结构.

我实际需要的示例图片：

有人可以弄清楚吗？到目前为止,我还没有在互联网上找到解决办法.

/* FLEXBox RELATED */.grID {  display: flex;  justify-content: space-between;  flex-flow: row wrap;}.block {  flex: 0 24%;  display: flex;}.container {  display: flex;  flex-flow: row wrap;  align-items: flex-start;}.Title {  flex: 0 100%;}.desc {  flex: 0 100%;}.button {  flex: 0 100%;  align-self: flex-end;}/* NO FLEXBox RELATED */.block {  background-color: #ccc;}.Title {  Font-size: 2rem;  Font-weight: bold;  padding: 0.5rem;  text-align: center;}.desc {  background-color: grey;  padding: 0.5rem;}.button {  padding: 0.5rem;  color: blue;  text-align: center;  Font-weight: bold;}

<div >  <div >    <div >      <div >Title 1</div>      <div >Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 2</div>      <div >Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 3</div>      <div >Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 4</div>      <div >Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div></div>

The codepen code is here

解决方法 由于您正在使用行方向Flex容器,因此无法将最后一项固定到底部.你正在处理横轴空间分布,这意味着柔性线被拉伸或打包,并且没有办法将两个项目固定到顶部和一个到底部(除非你超越flexBox并使用绝对定位).

这是一个完整的解释.

> How does flex-wrap work with align-self,align-items and align-content?

使布局工作的一种简单有效的方法是列方向容器,在最后一项上具有d性自动边距.通过在主轴上对齐项目,您可以将各个项目分开.

以下是flex auto margin的解释：

> In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?

/* FLEXBox RELATED */.grID {  display: flex;  justify-content: space-between;  flex-flow: row wrap;}.block {  flex: 0 24%;  display: flex;}.container {  display: flex;  flex-direction: column; /* new */  /* flex-flow: row wrap; */  /* align-items: flex-start; */}.Title {  /* flex: 0 100%; */}.desc {  /* flex: 0 100%; */}.button {  margin-top: auto; /* new */  /* flex: 0 100%; */  /* align-self: flex-end; */}/* NO FLEXBox RELATED */.block {  background-color: #ccc;}.Title {  Font-size: 2rem;  Font-weight: bold;  padding: 0.5rem;  text-align: center;}.desc {  background-color: grey;  padding: 0.5rem;}.button {  padding: 0.5rem;  color: blue;  text-align: center;  Font-weight: bold;}

<div >  <div >    <div >      <div >Title 1</div>      <div >Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 2</div>      <div >Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 3</div>      <div >Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div>  <div >    <div >      <div >Title 4</div>      <div >Description Description Description Description Description Description Description Description Description Description</div>      <div >button</div>    </div>  </div></div>

revised codepen

总结

以上是内存溢出为你收集整理的html – 将d性项目固定到容器的底部全部内容，希望文章能够帮你解决html – 将d性项目固定到容器的底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。