Question

是否可以将第二列（绿色框）与上面的灰色框对齐，同时保持列之间的间距相等。

我知道你可以删除空白区域，但我希望它们有填充。

使用calc函数可能有些方法吗？

＆＃13;

* {
  box-sizing: border-box;
}
body {
  color: #fff;
}
/* Top left & right col */

.left-col {
  background: grey;
  float: left;
  width: 66.6%;
  padding: 1rem;
}
.right-col {
  background: orange;
  float: left;
  width: 33.3%;
  padding: 1rem;
}
/* Col row */

.col-row {
  margin-left: -1rem;
}
/* Bottom cols */

.col {
  float: left;
  width: 33.3%;
}
.col-a,
.col-b,
.col-c {
  padding-left: 1rem;
}
/* Col content */

.col-a-content {
  background: red;
  padding: 1rem;
}
.col-b-content {
  background: green;
  padding: 1rem;
}
.col-c-content {
  background: blue;
  padding: 1rem;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>

</head>

<body>
  <div class="left-col">
    <span>test content</span>
  </div>
  <div class="right-col">
    <span>test content</span>
  </div>
  <div class="col-row">
    <div class="col col-a">
      <div class="col-a-content">
        <span>col a</span>
      </div>
    </div>
    <div class="col col-b">
      <div class="col-b-content">
        <span>col a</span>
      </div>
    </div>
    <div class="col col-c">
      <div class="col-c-content">
        <span>col a</span>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

我认为这就是你所追求的目标：

* {
  box-sizing: border-box;
}
body {
  color: #fff;
}
/* Top left & right col */

.left-col {
  background: grey;
  float: left;
  width: calc(66.6% - .333rem);
  padding: 1rem;
}
.right-col {
  background: orange;
  float: right;
  width: calc(33.3% - .666rem);
  padding: 1rem;
}
/* Col row */

.col-row {
  margin-left: -1rem;
}
/* Bottom cols */

.col {
  float: left;
  width: 33.3%;
}
.col-a,
.col-b,
.col-c {
  padding-left: 1rem;
}
/* Col content */

.col-a-content {
  background: red;
  padding: 1rem;
}
.col-b-content {
  background: green;
  padding: 1rem;
}
.col-c-content {
  background: blue;
  padding: 1rem;
}

<body>
  <div class="left-col">
    <span>test content</span>
  </div>
  <div class="right-col">
    <span>test content</span>
  </div>
  <div class="col-row">
    <div class="col col-a">
      <div class="col-a-content">
        <span>col a</span>
      </div>
    </div>
    <div class="col col-b">
      <div class="col-b-content">
        <span>col a</span>
      </div>
    </div>
    <div class="col col-c">
      <div class="col-c-content">
        <span>col a</span>
      </div>
    </div>
  </div>
</body>

Answer 2

您可以使用calc函数计算所需的空间。您只需要少量的额外间距（$reject_query = "UPDATE $tbl_name set $column_reject = 0 where $column_cond='$reject_id'";），其计算方法与较大元素的宽度相同。

.66rem

* {
  box-sizing: border-box;
}
body {
  color: #fff;
}
/* Top left & right col */

.left-col {
  background: grey;
  float: left;
  width: calc(66.66% + .66rem);
  padding: 1rem;
}
.right-col {
  background: orange;
  float: left;
  width: calc(33.3% - .66rem);
  padding: 1rem;
}
/* Col row */

.col-row {
  margin-left: -1rem;
}
/* Bottom cols */

.col {
  float: left;
  width: 33.3%;
}
.col-a,
.col-b,
.col-c {
  padding-left: 1rem;
}
/* Col content */

.col-a-content {
  background: red;
  padding: 1rem;
}
.col-b-content {
  background: green;
  padding: 1rem;
}
.col-c-content {
  background: blue;
  padding: 1rem;
}

用上面的列排列间隔的柱子

2 个答案: