の分離のdiv

Question

私は（写真1を参照してください）、それらの間のスペースで、この2つのdivを分離しようとしています。 問題は、マージンやパディングを追加するときです（写真2を参照してください）。ここで

が私のコードで、私はブートストラップを使用していないに注意してください：

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

 
.col-50 { 
 
    width: 50%; 
 
    float: left; 
 
    position: relative; 
 
    min-height: 1px; 
 
    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="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 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>

ここに私のHTMLとCSSコードです。私は数日間この仕事をしようとしています。助けてください。私はこれらの2つのdivを完全に等間隔で区切りたい。私はBootstrapのアプローチを試す前に、Bootstrapからグリッドを模倣して学習しようとしています。

Answer 1

margin-right/leftを.cardbox divに追加しようとしましたか？

EDIT：

あなたが行/コンテナ、あなたはページ全体の周りに持っているdiv要素の幅を拡張する必要があります。

Answer 2

同じ結果を得るにはflexboxを使用します。最新のブラウザのみを目指す場合は、最新のgridプロパティを使用してください。

.row { 
 
    background-color: red; 
 
    display: flex; 
 
    flex: 2 0 50% 50%; 
 
    width: 100%; 
 
} 
 

 
.card-box { 
 
    width: 100%; 
 
} 
 

 
.col-50 { 
 
    background-color: yellow; 
 
    display: flex; 
 
    flex: 2 0 50% 50%; 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <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 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>

Answer 3

私は動作しますが、問題は、今あるrow用負のマージンを削除し、.col-50

.col-50 { 
 
width: calc(50% - 1.5rem); 
 
float: left; 
 
position: relative; 
 
min-height: 1px; 
 
padding-left: 0.75rem !important; 
 
padding-right: 0.75rem !important; 
 
margin:0 0.75rem; 
 
background:green 
 
} 
 

 

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

 
*{ 
 
    box-sizing: border-box; 
 
} 
 
input{ 
 
    width:100% 
 
} 
 
/*.col-50:first-child{ 
 
    margin-left:0 
 
} 
 
.col-50:last-child{ 
 
    margin-right:0 
 
}*/

<div class="row"> 
 
    <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 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>