html - 两列之间的 CSS 垂直分隔线将与较长列的高度相匹配

Question

我正在使用 Bootstrap 3，这几天一直在思考这个问题。最简单的方法是为左列设置一个 border-right ，或者为右列设置一个 border-left ，并使用一些填充来模拟垂直分隔线。这种解决方案的问题是它不智能，因此它的高度始终是 1 列的高度，具体取决于 border-right 或 border-left 是在 CSS 中使用。

我做了一些研究并发现了这个:http://codepen.io/philhoyt/pen/ockht

它非常接近我希望实现的目标，但我需要一些帮助来将 .vertical-divider 改造到我的 Bootstrap 3 CSS 框架中并使其具有响应能力。

这是我现在拥有的 HTML:

<section class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <h4>Left column title</h4>
                <p>Left column text</p>
            </div>
            <div class="col-md-4">
                <h4>Right column title</h4>
                <p>Right column text, which may be longer or shorter than the left column</p>
            </div>
        </div>
</section>

有人知道如何做到这一点吗？谢谢!

Answer 1

感谢大家的评论。在尝试了几种不同的方法之后。在其他方面，为了满足我的所有需求(如下所列)，我不得不采用 flex 盒方法，它很好地解决了我最初的问题。再次感谢!

希望这些信息对大家有帮助!

回顾一下我的需求:

• Bootstrap 3 作为 CSS Backbone 框架
• 需要在 2 个 Bootstrap 响应列之间有一个垂直分隔线
• 垂直分隔线的高度需要与较长列的高度(可能是左列或右列)匹配
• 当 Bootstrap 响应列成为移动设备的单列时，垂直分隔线将需要消失

最终解决方案:

HTML:

<section class="container-fluid">
    <div class="row row-flex">
        <div class="col-md-8 col-flex-item vertical-divider">
            <h4>Left column title</h4>
            <p>Left column text</p>
        </div>
        <div class="col-md-4 col-flex-item">
            <h4>Right column title</h4>
            <p>Right column text, which may be longer or shorter than the left column</p>
        </div>
    </div>
</section>

CSS:

.row-flex {
display: flex;
flex-flow: row wrap;
}
.col-flex-item {
display: flex;
flex-flow: column;
}
.vertical-divider {
border-right: 1px solid black;
}