html - 分离 Div

Question

我试图用它们之间的空格分隔这 2 个 div(请参见图 1)。问题是当我添加边距或填充时会发生这种情况(请参见图 2)。

这是我的代码，请注意我没有使用 Bootstrap:

.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

我会使用 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>