主页 / 问题 / 690007
Accepted
Yuri
Asked:2020-07-09 17:22:57 +0000 UTC2020-07-09 17:22:57 +0000 UTC

最佳负偏移值

  • 772

有一个引导框架。该框架使用负缩进技术。

例子：

.container {
  border: 2px solid red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
}
.row {
  margin: 0 -15px;
  border: 2px solid blue;
  overflow: hidden;
}
.col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33333333%;
  border: 2px solid yellow;
  float: left;
  height: 100px;
}
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

那么，他们是从哪里得到需要缩进 15 像素而不是 12 像素的想法的呢？如何选择最佳偏移量？你需要远离什么？

css

1 个回答

  1. Best Answer

    它是这样工作的：最外面列的填充被负边距吸收。三列占据布局的整个宽度。

    当我们通过@media 将列的宽度更改 50% 或 100% 时，最有趣的事情就开始了。多亏了flex-wrap:wrap;他们，它们换行到新的一行，并且一切都井井有条，再次带有填充和边距。

    也就是说，这样的布局是立即自适应的。

    在代码示例中，我只更改了第 2 行和第 3 行的列宽 - 并自动获得了两列和一列的布局。

    .container {
  border: 2px solid red;
  width: 500px;
  margin: auto;
  height: auto;
}

.row {
  margin: 0 -15px;
  border: 2px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.col {
  width: 33.3333333%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: none;
  height: 100px;
  padding: 0 15px;
  margin-bottom: 10px;
}

.cell {
  background: yellow;
  height: 100px;
}

#col-2 .col {
  width: 50%
}

#col-1 .col {
  width: 100%
}
    <div class="container">
  <div class="row">
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>
  </div>

  <div class="row" id="col-2">
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>
  </div>

  <div class="row" id="col-1">
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>
    <div class="col">
      <div class="cell"></div>
    </div>

  </div>

</div>

    • 2

相关问题