表格单元中内联元素的垂直对齐

Question

I have multiple divs with dynamic content and all of them have the same height. Beside the content a Submit Button is inside of each div, which is directly next to the content. But i want to display the Button at the bottom of the div.

HTML Markup:

<div class="product-teaser-row">
    <div class="product-teaser">
         <h2>Title</h2>

        <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
        <button class="btn btn-grey" type="submit" name="action">Ansehen</button>
    </div>
    <div class="product-teaser">
         <h2>Title 2</h2>

        <p>Content</p>
        <button class="btn btn-grey" type="submit" name="action">Ansehen</button>
    </div>
</div>

CSS Code:

div.product-teaser {
    border: 1px #c7d2d6 solid;
    padding: 0px 10px 10px 10px;
    width: 216px;
    height: 100%;
    display: table-cell;
}

div.product-teaser-row {
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
}

I've already tried different things like vertical-align: bottom on the div and display: inline-block on the Button, but nothing worked for me.

Here is a JSFiddle Demo of my code.

Answer 1

You can try this

CSS

div.product-teaser {
    border: 1px #c7d2d6 solid;
    padding: 0px 10px 20px 10px; /*Increase the bottom padding so the button does not overlap the content*/
    width: 216px;
    height: 100%;
    display: table-cell;
  position: relative; /*Add this css*/
}

/*Set the button at the bottom using position: absolute;*/
    .btn-grey {
      bottom: 5px;
        left: 5px;
        position: absolute;
    }

Answer 2

To do that you just have to position absolute your button and define the bottom position and give a padding-bottom to your container to be sure that no content will override your button.

here for a jsfiddle exemple.

Answer 3

You could try adding a height property to the p element.

Example:

p{
  height: 95px;
}

JSFiddle Demo : http://jsfiddle.net/robcabrera/g3p2Y/1/

Answer 4

why don't you put button in separate <div> tag like:

 <div id=my>

     <button class="btn btn-grey" type="submit" name="action">
           Ansehen    
     </button>

</div>

set according margin-top to put the button at bottom like:

#my
{
   margin-top:100px;

}

FIDDLE here