Question

也使用Bootstrap 3.0。我希望盒子的高度和高度相同。右侧框中的更多链接位于正确的位置，但框在更多链接之前结束。

HTML

<div class="container body-content">
    <div class="row categoryrow">
        <div class="col-md-6 categoryblock">
            <div class="category">
                <div>
                    India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
                    India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
                </div>
                <span class="morelink">
                    <a href="/Category/Health">More..</a>
                </span>
            </div>
        </div>
        <div class="col-md-6 categoryblock">
            <div class="category">
                <div>
                    Sensex, Nifty slightly up in early trade
                </div>
                <span class="morelink">
                    <a href="/Category/Business">More..</a>
                </span>
            </div>
        </div>
    </div>
</div>

CSS

.categoryrow {
     display: flex;
 }
 .categoryblock {
     margin-bottom: 10px;
     width: 100%;
 }
 .category {
     border-radius: 5px;
     border: 1px solid #2bbcef;
     height: 100%;
     padding: 2px;
 }
 .morelink {
     font-style: italic;
     float: right;
     bottom: 0;
     right: 0;
     position: absolute;
     margin-right: 20px;
 }

Answer 1

我们可以大幅减少HTML标记的数量。

要使每个区块达到相同的高度：

包含两个内容块的行被赋予display: flex;
两个内容块被赋予flex: 1;并删除了高度属性。

获取更多信息＆＃34;链接正确定位：

内容块被赋予position: relative;，以便链接相对于其容器而不是视口定位。
为每个内容块提供适当的填充量。

将所有内容放在内容块中，并使用<h1>作为标题，<p>作为主要内容段。

注意：某些浏览器（例如Safari）目前仅支持带前缀的flex属性。我在下面的CSS代码段中添加了-webkit前缀。始终将放在未加前缀的属性之前。

Here is a good reference for browser support.

CSS / HTML / Demo

＆＃13;

.row {
    display: -webkit-flex;
    /* Prefixed for Safari */
    display: flex;
}
.content {
    -webkit-flex:1;
    /* Prefixed for Safari */
    flex:1;
    border-radius: 5px;
    border: 1px solid #2bbcef;
    position: relative;
    margin: 10px;
    padding: 10px 10px 30px;
}
.more {
    font-style: italic;
    bottom: 10px;
    right: 10px;
    position: absolute;
}

＆＃13;

<div class="row">
    <div class="content">
         <h1>Heading</h1> 
        <p>India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients</p> <a class="more" href="/Category/Health">More..</a>

    </div>
    <div class="content">
         <h1>Heading</h1> 
        <p>Sensex, Nifty slightly up in early trade</p> <a class="more" href="/Category/Business">More..</a>

    </div>
</div>

＆＃13;

Answer 2

首先，你需要添加位置：相对;到位置的父元素：绝对..在这种情况下：

.category {
position: relative;

}

另外，如果你添加一个元素高度100％，但父母没有高度.. 100％的任何东西都是0.所以添加100％的高度（如果这是你想要的）给所有父母。 ..这是你的js修改：

http://jsfiddle.net/je6qtkLn/3/

div高度：100％并且显示：flex在Chrome中无法正常工作

2 个答案: