html - 平均分离2个div

Question

Image 1

我想去掉 DIV 1 的 padding-left 和 DIV 2 的 padding-right，以便将中间的 2 个 div 分开。我想要 。请注意，我没有使用 Bootstrap。 (请参见图 1)

这是我的 HTML 代码:

<div class="row">
        <div class="col-50">
            <div class="card-box">
                <h4 class="header-title">View Data</h4>
                <div class="col-100">
                    <div class="row">
                        <div class="col-50">
                            <div class="btn-group">
                                <a class="btn-excel" href="#"><span>Excel</span></a>
                                <a class="btn-pdf" href="#"><span>PDF</span></a>
                            </div>
                        </div>
                        <div class="col-50">
                            <form class="pull-right">
                            <input type="text" placeholder="Search..." class="form-control">
                            <span><i class="fa fa-search"></i></span>
                        </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-100">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-50">
            <div class="card-box">
                <h4 class="header-title">View Data</h4>
                <div class="table-container">
                    <div class="row">
                        <div class="col-50">
                            <div class="btn-group">
                                <a class="btn-excel" href="#"><span>Excel</span></a>
                                <a class="btn-pdf" href="#"><span>PDF</span></a>
                            </div>
                        </div>
                        <div class="col-50">
                            <form class="pull-right">
                            <input type="text" placeholder="Search..." class="form-control">
                            <span><i class="fa fa-search"></i></span>
                        </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-100">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是我的 CSS 代码:

*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;   

.row::after {
content: "";
display: table;
clear: both;

.row {
margin-left: -0.75rem !important;
margin-right: -0.75rem !important;

.col-50 {
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;

.card-box {
padding: 5px 20px 20px 20px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin-top: 15px;
margin-bottom: 20px;
background-color: #ffffff;
box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
display: block;
min-height: 0.01%;
overflow-x: auto;   

Answer 1

使用first-of-type 和last-of-type 选择器选择第一列和最后一列，然后移除第一列的左填充最后一列的列和右填充像这样:

.col-50:first-of-type {
  padding-left: 0rem;
}

.col-50:last-of-type {
  padding-right: 0rem;
}

类 .col-50 已经有 padding-left: 0.75rem; 和 padding-right: 0.75rem; 将添加列之间的间距相等，因此无需对其进行编辑。

.col-50 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

这是工作代码笔示例:http://codepen.io/anon/pen/evxyNb