0

So I've the following scenario:

Enter this jsbin: http://jsbin.com/diqax/1/edit

If you notice this is a list, each list item has an image with text, the problem I'm facing is that I want the list items that are on the bottom to push down based on the height of the largest item with text.

Eric Bergman
  • 1,453
  • 11
  • 46
  • 84

1 Answers1

1

Well, you should change the display type of the list items to inline-block instead of using float, then use vertical-align: top; to align the inline block elements vertically.

#gallery li {
  display: inline-block;
  vertical-align: top;
  /* other styles here... */
}

Online Demo.

For further info refer to my answer here, also in order to remove the white space between inline(-block) elements, you can refer to this.

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Make sure you remove any white space between your
  • tags or you will have a 'word space' between elements. i.e.
  • – Ric Feb 25 '14 at 14:48
  • @HashemQolami Lets say I wanted to add a text saying "Read More" at the bottom of the text, how do I make sure the text always stays at the bottom ? – Eric Bergman Feb 25 '14 at 15:18
  • @EricBergman Is this what you mean? http://jsbin.com/tehurajo/3/edit If you append the *Read More* text/link into the paragraphs, you can force the link to be displayed at a new line by `a:before { content: ''; display: block; }`. – Hashem Qolami Feb 25 '14 at 16:47
  • @Hashem Qolami I want all the "Read More" links to be aligned on the same line regardless of the content. What I tried is making the "Read More" link absolute and its parent relative and add bottom:0 to it but the problem with that is that if the text increases it will overlap the Read More text. – Eric Bergman Feb 26 '14 at 11:52
  • @EricBergman If these contents are summary, why don't you limit the words? or the lines? Take a look at: http://jsbin.com/tehurajo/6/edit If you were interested, follow this approach: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php or this one: http://codepen.io/romanrudenko/pen/ymHFh – Hashem Qolami Feb 26 '14 at 12:18