Geek Answers Handbook

Anchor tags - equal height, still available for CSS?

I have a little jsfiddle code: http://jsfiddle.net/tYrCe/1/ Edit it if you want!

I have 3 buttons with anchor tags. I would like them to be equal in height.

Requirements

  • Equal in height
  • Regardless of the content (min-height, not normal)
  • All link should still be clickable (javascript onclick, not ok)
+5
source share
2 answers

You can use display: table-cell.

table-layout: fixed evenly distributes the available width between cells.

, : http://caniuse.com/css-table
( , IE6/7 , outline)

: http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}
+2

, CSS, , , " - " .

.

HTML:

<div class="urls">
    <a href="#">A little content</a>
    <a href="#">A little more content with more text</a>
    <a href="#">A little very much more content with very much more text</a>
</div>

CSS

.urls {
    width: 300px;
    overflow-y: hidden;
}
.urls a {
    display: inline-block;
    float: left;
    padding-bottom: 30em;
    margin: 0 0 -29em;
    width: 33.33%;
}
+1

More articles:


All Articles