See jsfiddle here: https://jsfiddle.net/q3ob7h1o/1/ Or just read it here if you want:
Code
* { 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 am i trying to do
I am trying to make the .footer div position at the bottom of each of the .tile elements, so that regardless of the amount of content in each fragment, the footers line up.
I know I can use position: absolute in the footer, but I would prefer to avoid this, since the height of the footer may not be known.
I tried turning the .tile into .tile itself and setting its direction to the column, but that didn't work. I also tried turning each tile into a cell table, but that didn't work either.
The bit that throws me is that I'm trying to target an item inside one of the children of an existing flexbox. Any flexbox properties that I apply relate to .tile and not to .footer
Help with thanks :)
source share