分隔Div

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的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>

Answer 2

您是否尝试过将margin-right / left添加到.cardbox 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 }*/

的边距

＆＃13;

＆＃13;

<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>

＆＃13;

tableMaquinas

＆＃13;

＆＃13;

＆＃13;