无法从100％高度的flexbox cols中删除意外的反向缩进

时间：2017-12-08 10:39:01

标签： html css css3 flexbox frontend

我不明白，为什么我会在底部得到这些缩进：

Unexpected indents

我想将行拆分为相等高度的cols，以在cols之间创建相同的高度边框。但不知怎的，我得到反向缩进。我不使用花车，为什么它们会出现？我需要写height:100%，因为我需要有这些边框。如何删除此错误并保存相同高度的cols？这是我的代码：

＆＃13;
＆＃13; 
*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  padding-right: 50px;
  padding-left: 50px;
  background-color: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.36);
}

.container {
  position: relative;
}

.container:before,
.container:after {
  content: "";
  display: table;
}

.container:after {
  clear: both;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -50px;
  margin-left: -50px;
}

.row.no-gutters [class^='col-'],
.row.no-gutters .col {
  padding-left: 0;
  padding-right: 0;
}

[class^='col-'],
.col {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 50px;
  padding-left: 50px;
}

.col-lg-3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.feature {
  position: relative;
  flex: 0 1 auto;
  height: 100%;
  margin: 29px 0 0;
  padding: 8px 50px 0;
  text-align: center;
}

.feature__h {
  margin: 26px 0 30px;
  font-weight: 400;
  font-size: 29.23px;
  color: #2e3035;
}

.feature__p {
  margin: 1px 0 20px;
  line-height: 1.4;
  color: #828285;
}

.col+.col>.feature {
  border-left: 1px solid #2e3035;
}
＆＃13; 
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutters">
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
  </div>
  <!--.row-->
</div>
<!--.container-->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

height: 100%上margin: 29px 0 0和.feature的组合会导致溢出。

假设已设置边距以便可以看到阴影，请从.feature移除边距，然后在.container上添加下边距

您还在flex: 0 1 auto;上使用了.feature，但由于其父级不是灵活容器，因此不会应用并删除。

Stack snippet 

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  padding-right: 50px;
  padding-left: 50px;
  background-color: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.36);
  margin-bottom: 20px;                      /*  added  */
}

.container {
  position: relative;
}

.container:before,
.container:after {
  content: "";
  display: table;
}

.container:after {
  clear: both;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -50px;
  margin-left: -50px;
}

.row.no-gutters [class^='col-'],
.row.no-gutters .col {
  padding-left: 0;
  padding-right: 0;
}

[class^='col-'],
.col {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 50px;
  padding-left: 50px;
  padding-top: 26px;
}

.col-lg-3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.feature {
  position: relative;
  /*flex: 0 1 auto;                             not needed  */
  height: 100%;
  padding: 8px 50px 0;
  text-align: center;
}

.feature__h {
  margin: 26px 0 30px;
  font-weight: 400;
  font-size: 29.23px;
  color: #2e3035;
}

.feature__p {
  margin: 1px 0 20px;
  line-height: 1.4;
  color: #828285;
}

.col+.col>.feature {
  border-left: 1px solid #2e3035;
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutters">
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
  </div>
  <!--.row-->
</div>
<!--.container-->

更新

在height: 100%上使用.feature可能会导致您发布跨浏览器，而是可以将其删除并将display: flex添加到.col-lg-3。

通过这种方式，您可以利用flex“row”项的属性align-items，默认为stretch，并使.feature同样高。

Stack snippet 

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  padding-right: 50px;
  padding-left: 50px;
  background-color: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.36);
  margin-bottom: 20px;                       /*  added  */
}

.container {
  position: relative;
}

.container:before,
.container:after {
  content: "";
  display: table;
}

.container:after {
  clear: both;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -50px;
  margin-left: -50px;
}

.row.no-gutters [class^='col-'],
.row.no-gutters .col {
  padding-left: 0;
  padding-right: 0;
}

[class^='col-'],
.col {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 50px;
  padding-left: 50px;
  padding-top: 26px;
}

.col-lg-3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  display: flex;                             /*  added  */
}

.feature {
  position: relative;
  padding: 8px 50px 0;
  text-align: center;
}

.feature__h {
  margin: 26px 0 30px;
  font-weight: 400;
  font-size: 29.23px;
  color: #2e3035;
}

.feature__p {
  margin: 1px 0 20px;
  line-height: 1.4;
  color: #828285;
}

.col+.col>.feature {
  border-left: 1px solid #2e3035;
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutters">
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
    <div class="col-lg-3 col">
      <section class="feature">
        <h3 class="feature__h">feature 1</h3>
        <p class="feature__p">
          text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </section>
      <!--.feature-->
    </div>
    <!--col-->
  </div>
  <!--.row-->
</div>
<!--.container-->

相关问题
最新问题