如何正确设置CSS中的边框而不跨越下一个div?

时间:2017-10-03 08:45:34

标签: html css

我在列上设置边框时遇到问题。文本正在改变div的大小,因此边框会发生变化。我试图设置固定大小的div,但它并不好。我不确定为什么边界会移动。是填充吗?我是初学者,很难让我做到正确。锄头要固定,不要越过下一个div? enter image description here

这是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>

和CSS:

.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;
}

0 个答案:

没有答案