在div中添加垂直线的最实用的方法是什么？

Question

我有一个div / box。我正在尝试在该div中创建一条垂直线。 我尝试使用border-right，但由于某种原因，该行并没有一直延伸到适合我的div。

由于我的div类是section

.section {
    border-right: 2px solid #c9cacb;
}

HTML

<hr style="height: 100pt; visibility: hidden;" />
<div class="container summary">
    <div class="row">
        <div class="col-xs-1 section">
            <br>
            <p>
                Section
                    <br>
                <span class="section-num">2.2</span>

                <br>
                Exercise
            </p>
        </div>
        <div class="col-xs-3">
            <br>
            <div class="row cb-btns-row " style="background-color: white;">
                <div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
                    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
                        <span class="summary-texts">Group A </span>

                        <ul class="dropdown">
                            <li><a class="group" id="group-a">Group A </a>

                            </li>
                            <li><a class="group" id="group-b">Group B </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="text-align: left;" class="summary-texts">
                <br>
                Problem set: Same
                    <br>
                Start: 4/10/2015 2:00 pm
            </p>
        </div>
        <div class="col-xs-5">
            <br>
            <br>
            <br>
            <p style="text-align: left;" class="summary-texts">
                Students: 9/25
                    <br>
                Due: 4/10/2015 3:00 pm
            </p>
        </div>
        <div class="col-xs-1 student-submit">
            <br>
            <span class="student-submit-num">9/9</span>

            <br>
            STUDENTS
                <br>
            SUBMITTED
        </div>
        <div class="col-xs-1 avg-score">
            <br>
            <span class="avg-score-num">71 <small>% </small></span>

            <br>
            AVG SCORE
        </div>
        <div class="col-xs-1 hide-details">
            <br>
            <img src="http://s13.postimg.org/5xe0gy3pv/Screen_Shot_2015_05_26_at_11_40_40_AM.png" width="40">
            <br>
            HIDE
                <br>
            DETAILS
        </div>
    </div>
</div>

Here is my JSFiddle

在div中添加垂直线的最实用的方法是什么？

Answer 1

我添加了这个CSS：

.section-row{
    overflow:hidden;
}
.section{
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

新课程

  <div class="row section-row">
        <div class="col-xs-1 section">

See it work here

这是使bootstraps列具有相同高度的普遍接受的方法。

HTH， -Ted

Answer 2

因为你把它标记为Jquery：

这里有一些jquery代码可以解决这个问题

$().ready( function () {
    var rowheight = $(".row").height();
    $('.section').height(rowheight);
});

基本上强制div与行div（其容器）具有相同的高度。

注意：这不是一个非常优雅的解决方案，如果行的大小发生变化，这将失败。因此，您可以将该代码绑定到调整行大小的事件。

CSS：

我发现使用相对宽度和高度是最简单的方法：

.parent-class
{
height:100%; //MATCHES BODY, OR IT's CONTAINER
height:200px; //IT'S OWN FIXED HEIGHT
height:auto; //SIZES TO WHATEVER IS INSIDE
}
.child-class
{
height:100%; //MATCHES THE .parent-class HEIGHT
}

Answer 3

如果你不介意添加几行jquery，这是工作演示：

DEMO http://jsfiddle.net/fkoc0k3v/9/

JQUERY

$(document).ready(function(){
    $('.row').each(function(){
        $(this).find('.section').css({'height':$(this).outerHeight()});
    });
});