html - CSS:带有分隔符元素的响应式布局变得不成比例？

Question

我有一个响应式布局，工作正常，但我遇到的问题是，当我在页面中添加一个简单的分隔符元素时，所有内容都会乱七八糟。

这是一个工作FIDDLE

如果您尽可能地拉伸(stretch) fiddle 中的页面，您就会看到问题。

问题来自此元素:<div class="divider"></div>

如果您删除该元素，一切都会再次正常工作，但我需要该分隔符元素，并且我无法弄清楚为什么会发生这种情况!

这是我的整个代码:

/* imports */
@import url(http://fonts.googleapis.com/css?family=Lobster);
/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
    content: "";
  display: table;
  clear: both;
}


/* global */

.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}
h1 {
  font-family: "Lobster", cursive;
  font-size: 1.3em;
  margin-bottom: 10px;
  background-color:#000;
  color:#FFF;
  padding:10px;

}
h2 {
  font-weight: 700;
}

/* grid */
[class*="row-"] {
  margin-bottom: 20px;
}
[class*="row-"]:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
}

@media all and ( min-width: 768px ) {

  /* all cols margin */
  [class*="col-"] {
    margin-right: 20px;
  }
  [class*="col-"]:last-child {
    margin-right: 0;
  }

  /* make the columns responsive */
  .col-1-2 {
    float: left;
    width: 50%;
  }
  .col-1-4 {
    float: left;
    width: 25%;
    border-left: 1px dotted #e46a10;
    padding:10px;
  }
  .col-1-8 {
    float: left;
    width: 25%;
  }

  /* 2 span rows */
  .row-2 {
    padding-left: 20px;
  }
  .row-2 [class*="col-"]:first-child {
    margin-left: -20px;
  }

  /* 4 span rows */
  .row-4 {
    padding-left: 60px;

  }
  .row-4 [class*="col-"]:first-child {
    margin-left: -60px;
  }

  /* 8 span rows */
  .row-8 {
    padding-left: 60px;
  }
  .row-8 [class*="col-"]:nth-child(4n+1) {
    margin-left: -60px;
  }
  .row-8 [class*="col-"]:nth-child(5n-1) {
    margin-right: 0;
  }
  .row-8 [class*="col-"]:nth-child(6n-1) {
    clear: both;
  }

}


@media all and ( min-width: 1200px ) {

  /* adjust width */
  .col-1-8 {
    float: left;
    width: 12.5%;
  }

  /* 8 span rows */
  .row-8 {
    padding-left: 140px;
  }
  /* reset these... */
  .row-8 [class*="col-"]:nth-child(4n+1) {
    margin-left: 0;
  }
  .row-8 [class*="col-"]:nth-child(5n-1) {
    margin-right: 20px;
  }
  .row-8 [class*="col-"]:nth-child(6n-1) {
    clear: none;
  }
  /* and add this */
  .row-8 [class*="col-"]:nth-child(1) {
    margin-left: -140px;
  }

}


.divider{
display:inline-block;
    width: 100%;
border-bottom: 1px dotted #ccc;

}

有人可以就这个问题提出建议吗？

Answer 1

我想我找到了问题所在:

[class*="col-"]:last-child {
    margin-right: 0;
}

由于 css 类没有最后一个子级，因此此代码实际上采用 .row 容器中的最后一个 div，因此在本例中它采用 .divider!

因此，如果可以的话，只需更改分隔符的标签，例如在 section 中!

或者代替 :last-child，使用 :nth-child(n)