如何在显示中获得相同的高度：表格单元格答案

【问题标题】：How to get same height in display:table-cell如何在显示中获得相同的高度：表格单元格
【发布时间】：2015-03-02 14:28:49
【问题描述】：

我有 3 个按钮，我希望它们具有相同的高度。我也希望它在选项卡分辨率中具有相同的高度。我希望这可以在 css 中实现。

谁能告诉我如何才能做到这一点。

HTML：

<div class="content">
    <p>It's easy to become a member. </p>
    <p> Join today online    </p>
    <div class="btn-wrap">
        <div class="row">
            <div class="col"><a href="">Find Nearest Agent</a></div>
            <div class="col"><a href="" >Join Now</a></div>
            <div class="col"><a href="" >Download the App</a> </div>
        </div>
    </div>
</div>

CSS：

.content {
    width:75%; //there is a reason to use 75% here coz I have to place an image for remaining 25%.
}

.btn-wrap {
    display:table;
    border-collapse: separate;
    width:100%;
    overflow: hidden;
}

.row {
    display:table-row;
}

.col {
    display:table-cell;
    padding: 0 0.5% 0;
    width:32%;
    float: left;
} 

a {
    font-size: 20px;
}

input[type="submit"], a {
    border: 0 none;
    box-sizing: border-box;
    display: block;
    font-family: "Lato",Arial,sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
    margin: 0;
    padding: 20px 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #ff0;
    color: #1d6221
}

JSFiddle:http://jsfiddle.net/qwdduc7z/5/

【问题讨论】：

尝试删除 a 周围的 div 并将 class="col" 放在锚点上。

标签： html css

【解决方案1】：

HTML

<div class="content">
    <p>Easy to become number</p>
    <p>Join Now </p>
    <div class="btn-wcircle-wrap">
        <div class="row">
            <a href="" class="col">Find Nearest Agent</a>
            <a href="" class="col btn yellow mt">Join Now</a>
            <a href="" class="col btn red mt">Download the App</a> 
        </div>
    </div>
</div>

CSS

.content {
    width:75%;
}

.btn-wcircle-wrap {
    display: table;
    height: 100px;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
    padding: 0 0.5%;
    width: 32%;
} 
a {
    border: none;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    font-family: "Lato",Arial,sans-serif;
    font-size: 17px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #ff0;
    color: #1d6221;
}

“模仿原来的例子”

.content
{
    width:75%;
}
.btn-wcircle-wrap {
    display:table;
    width:100%;
}
.row {
    display:table-row;
}
.col {
    display:table-cell;
    padding: 20px 0.5%;
    width:32%;
    text-align: center;
    background-color: #ff0;
    box-shadow: 5px 0 0 0 white inset;
    // or use 
    // border: 5px solid white;
} 

a {
    box-sizing: border-box;
    vertical-align: text-top;
    font-family: "Lato",Arial,sans-serif;
    font-size: 17px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    color: #1d6221;
}

http://jsfiddle.net/tksek87m/

【讨论】：

【解决方案2】：

将height: 75px; 添加到input[type="submit"], a{。例如。 here

【讨论】：