Question

我有两个div，他们的身高正在动态变化。左边的div可能高于右边的div，也可能相反。如何在它们之间创建一个可以根据它们的高度动态变化的边框？边框应该从行的顶部到底部。我使用的是Bootstrap 4，我更喜欢只使用CSS。

HTML

<div class="container">
    <div class="row">
        <div class="left col-md-6">a</div>
        <div class="right col-md-6">asdasdasd
            <br/>a
            <br/>asdsad
            <br/>asd
            <br/>asd
            <br/>asdsa
            <br/>d
            <br/>as
            <br/>d
            <br/>asdsad
            <br/>asdasdasd
            <br/>
        </div>
    </div>
</div>
<br/>
<div class="container">
    <div class="row">
        <div class="left col-md-6">
              <br/>a
            <br/>asdsad
            <br/>asd
            <br/>asd
            <br/>asdsa
            <br/>d
            <br/>as
            <br/>d
            <br/>asdsad
            <br/>asdasdasd
            <br/>
        </div>
        <div class="right col-md-6">
           asdasd
        </div>
    </div>
</div>

https://jsfiddle.net/ravepgz6/

Answer 1

您可以简单地为两个容器添加边框，并为正确的div margin-left: -1px;。

.left {
    border-right: 1px solid black;
}
.right {
    border-left: 1px solid black;
    margin-left: -1px;
}

https://jsfiddle.net/ravepgz6/1/

但是，如果div之间存在基于百分比的差距（使用Bootstrap列可能会产生这种差异），则会失败。对于该用例，请描述甚至更好，显示结果应该是什么样的图像。

如何在动态变化高度的两个div之间创建边框？

1 个答案: