분리하기 div를

Question

나는 (그림 1 참조) 사이에 공간이이 개 된 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 코드입니다. 나는이 일을 며칠 동안하려고 노력하고있다. 도와주세요. 나는이 두 div를 완전히 같은 공간으로 분리하고 싶다. 나는 Bootstrap 접근법을 시도하기 전에 배우기 위해 Bootstrap에서 그리드를 모방하려고합니다.

Answer 1

margin-right/left를 .cardbox div에 추가 했습니까?

편집 :

당신은 행/용기, 당신은 전체 페이지의 주위에있는 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

추가 *{ box-sizing: border-box; }는 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>