は均等に

Question

Image 1

私は真ん中equallで2つのdivを分離するために、DIV 1及びDIV 2のパディング右のパディング左を取り除きたいです。したい 。私はブートストラップを使用していないことに注意してください。

*, *::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; 

：

<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コードです：ここで

が私のHTMLコードです（画像1を参照してください）

}

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

ここで働いてcodepen例です：http://codepen.io/anon/pen/evxyNb