html – 如何对齐一行列中的按钮

概述我有一排列,包括图像,一些文本和一个按钮.如何让每个列底部的按钮看起来对齐. 我尝试了各种d性盒方法,例如flex-end,但是这与其他内容对齐方式混淆.我还使用了父亲的位置相对和按钮的绝对底部0的位置.问题是它与可能包含不同文本长度的兄弟段落标记发生冲突. 示例图像 ！(https://www.dropbox.com/s/9e27ehcnqdsyx89/Screen%20Shot%202019- 我有一排列,包括图像,一些文本和一个按钮.如何让每个列底部的按钮看起来对齐.

我尝试了各种d性盒方法,例如flex-end,但是这与其他内容对齐方式混淆.我还使用了父亲的位置相对和按钮的绝对底部0的位置.问题是它与可能包含不同文本长度的兄弟段落标记发生冲突.
示例图像
！(https://www.dropbox.com/s/9e27ehcnqdsyx89/Screen%20Shot%202019-01-19%20at%2012.26.03%20PM.png?dl=0)

<div  for number of content><img/><div >  <h4>Title</h4></div><div >  <p>Paragraphs of varIoUs length</p></div><a>  <button >   CTA  </button></a></div>

解决方法@H_502_20@ 试试这个：

HTML

<div >  <div >    <div ><img src="https://dummyimage.com/300x300/000/fff" /></div>    <div >      <div ><h4>Title</h4></div>      <div ><p>Paragraphs of varIoUs lenthParagraphs of varIoUs lengthParagraphs of varIoUs length</p></div>    </div>    <div >      <button >CTA</button>    </div>  </div>  <div >    <div ><img src="https://dummyimage.com/300x300/000/fff" /></div>    <div >      <div ><h4>Title</h4></div>      <div ><p>Paragraphs of varIoUs lenthParagraphs of varIoUs lengthParagraphs of varIoUs length</p></div>    </div>    <div >      <button >CTA</button>    </div>  </div>  <div >    <div ><img src="https://dummyimage.com/300x300/000/fff" /></div>    <div >      <div ><h4>Title</h4></div>      <div ><p>Paragraphs of varIoUs lenthParagraphs of varIoUs lengthParagraphs of varIoUs length</p></div>    </div>    <div >      <button >CTA</button>    </div>  </div></div>

CSS

.container {    display: flex;  }  .item {    display: flex;    flex-flow: column;  }  .item:not(last-child) {    margin-right: 10px;  }  .item__image {  }  .item__content {    flex: 2 ;  }  .item__options {    text-align: center;    height: 100px;   }

在这里查看输出：https://jsfiddle.net/2467mgn5/2/

总结

以上是内存溢出为你收集整理的html – 如何对齐一行列中的按钮全部内容，希望文章能够帮你解决html – 如何对齐一行列中的按钮所遇到的程序开发问题。

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