Html 如何在CSS中正确设置边框而不在下一个div上交叉？

我在设置列的边框时遇到问题。文本正在更改div的大小，因此边框将更改。我试着设置固定大小的div，但效果不好。我不知道边界为什么在移动。是用来填充的吗？我是初学者，很难找到正确的方法。锄头使其固定，而不穿过下一个分区？

以下是HTML：

<div class="container full-width margin-bottom-x">
        <div class="row">
                <div class="col-xs-12 col-sm-6 fund-text">
                        <div class="col-xs-12 col-sm-12 no-padding">
                                <div class="pull-left" style="margin-left: 0px;">
                                <img src="http://mezet.xyz/romeda/wp-content/uploads/2017/09/funds-projects-01.png" alt="Fund project" />
                                </div>
                        </div>
                        <p>Russia’s leading auto leasing company. Fully exited in 2015.</p> 
                        <button type="button" class="btn btn-funds">More details</button>
                </div>

                <div class="col-xs-12 col-sm-6 fund-text">
                        <div class="col-xs-12 col-sm-12 no-padding">
                                <div class="pull-left" style="margin-left: 0px;">
                                <img src="http://mezet.xyz/romeda/wp-content/uploads/2017/09/fund-projects-02.png" alt="Fund project" />
                                </div>
                        </div>
                <p>Russia’s largest Internet company and leading 
        search engine.</p> 
                <button type="button" class="btn btn-funds">More details</button>
                </div>

        </div>
        <div class="row">  
            <div class="col-xs-12 col-sm-6 fund-text">
                <div class="col-xs-12 col-sm-12 no-padding">
                    <div class="pull-left" style="margin-left:0px;">
                        <img src="http://mezet.xyz/romeda/wp-content/uploads/2017/09/fund-projects-03.png" alt="Fund project" />
                    </div>
                </div>
                <p>The leading e-commerce platform in Russia and the CIS.</p> 
                <button type="button" class="btn btn-funds">More details</button>
            </div>
            <div class="col-xs-12 col-sm-6 fund-text">
                <div class="col-xs-12 col-sm-12 no-padding">
                        <div class="pull-left" style="margin-left:0px;">
                                <img src="http://mezet.xyz/romeda/wp-content/uploads/2017/09/fund-projects-04.png" alt="Fund project" />
                        </div>
                </div>
                        <p>Independent oil and gas company.</p> 
                        <button type="button" class="btn btn-funds">More details</button>
             </div>
        </div>
</div>

---

您可以删除公共边框，例如，保留一个列的左侧并删除其相邻列的右侧左侧边框不成问题。顶部和底部都是。因此，您可以执行相同的操作，从顶部元素中删除底部边框，并为底部元素保留顶部边框。您应该为容器保持固定高度，为内容设置一个

高度：auto

值（在您的情况下，没有指定

高度

值，可以），并将其置于容器的中心（这意味着您还将删除内容的顶部和底部填充以使其正常工作）。谢谢@AymDev。这很有效。您可以删除公共边框，例如保留一个列的左侧并删除其相邻列的右侧。左右边框没有问题。顶部和底部都是。因此，您可以执行相同的操作，从顶部元素删除底部边框，并保留底部元素的顶部边框。您应该为容器保留固定高度，设置内容的

height:auto

值（在您的情况下，没有指定

height

值，可以），并将其放在容器中居中（这意味着您还将删除内容的顶部和底部填充以使其正常工作）。谢谢@AymDev。它可以工作。

.fund-views{
    font-family: Roboto;
    background-color: #EFEFEF;
    color: #000000;
    text-align: center;

}
.fund-views .fund-text {
    padding: 90px;
    padding-left: 160px;
    border: 1px solid #cccccc;
}

.fund-views .fund-text p{
    font-size: 20px;
    font-weight: 100;
      text-align:left;
}