[英]Align an element to the bottom within a flexbox, without using position:absolute
See jsfiddle here: https://jsfiddle.net/q3ob7h1o/1/ Or just read it here if you'd rather: 请参阅这里的jsfiddle: https ://jsfiddle.net/q3ob7h1o/1/或者如果您愿意,请在此处阅读:
* { margin: 0; padding: 0; } ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; flex-direction: row; flex-wrap: wrap; -webkit-align-content: flex-end; align-content: flex-end; } .tile { width: 33%; display: inline-block; box-sizing: border-box; position: relative; } .content { background: beige; } .footer { background: teal; }
<ul> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some long long long long long long long long long long long long long long long long content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> </ul>
What I am trying to do is have the .footer
div align to the bottom of each of the .tile
elements, so that regardless of the amount of content in each tile, the footers line up. 我想要做的是将
.footer
div对齐到每个.tile
元素的底部,这样无论每个tile中的内容量如何,页脚都会排成一行。
I know I can use position: absolute
on the footer but I would rather avoid this as the height of the footer might not be known. 我知道我可以在页脚上使用
position: absolute
但我宁愿避免这种情况,因为页脚的高度可能不知道。
I tried turning .tile
into a flexbox itself and setting its direction to column, but this didn't work. 我尝试将
.tile
转换为flexbox本身并将其方向设置为列,但这不起作用。 I also tried turning each tile into a table-cell but this didn't work either. 我也尝试将每个瓷砖变成一个表格单元格,但这也不起作用。
The bit that is throwing me is that I am trying to target an element within one of the children of an existing flexbox. 抛弃我的是我试图在现有的flexbox的一个子元素中定位一个元素。 Any flexbox properties I apply apply to
.tile
, not .footer
我应用的任何flexbox属性适用于
.tile
,而不是.footer
Help greatly appreciated :) 非常感谢:)
Try the following solution: 尝试以下解决方案:
* { margin: 0; padding: 0; } ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; flex-direction: row; flex-wrap: wrap; -webkit-align-content: flex-end; align-content: flex-end; } .tile { width: 33%; display: flex; box-sizing: border-box; justify-content: space-between; flex-direction:column; } .content { background: beige; } .footer { background: teal; }
<ul> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some long long long long long long long long long long long long long long long long content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> <li class="tile"> <div class="content"> <div class="photo"></div> <h3>This is some content</h3> </div> <div class="footer"> <input type="submit" /> </div> </li> </ul>
The updated fiddle you can find here: https://jsfiddle.net/q3ob7h1o/2/ 你可以在这里找到更新的小提琴: https : //jsfiddle.net/q3ob7h1o/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.