html - How to set the div must in the bottom using CSS? -

This is the div for my product, you can see the demo in this way:

  & Lt; Div class = "productItem" & gt; & Lt; Div & gt; & Lt ;! - image - & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt ;! - Text - & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Each product has a product image and product text. The image is at the top, and the text is under each image but you can see that the size of the image may be different, so I do not always want text at the bottom instead of below the image. In addition to specifying the bottom position, how can I edit the text below?

It may be worth noting on making your images a standard size. Maybe a bigger and smaller size?

You can also simplify your HTML using something like this:

  & lt; Div class = "productItem" & gt; & Lt; Img class = "big" /> & Lt; P & gt; Text & lt; / P & gt; & Lt; / Div & gt;  

This will change the CSS based on the image (by giving it a square), and reducing the unnecessary div.

Perhaps the text using the Force feature to display the image above?

  img {display: block;}