CSS：响应式布局与divider元素不成比例？

Question

我有一个响应式布局，工作正常，但我遇到的问题是，当我在页面中添加一个简单的divider元素时，一切都到处都是。

这是一个有效的FIDDLE

如果你尽可能地在小提琴中拉伸页面，你会发现问题。

问题来自这个元素：<div class="divider"></div>

如果删除该元素，一切正常，但我需要那个divider元素，我无法弄清楚为什么会发生这种情况！

这是我的全部代码：

/* 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类没有last-child，因此该代码实际上是.row容器中的最后一个div，所以在这种情况下需要.divider！

所以，如果可以，只需更改分隔符的标记，例如section！

或者使用:last-child

而不是:nth-child(n)

Answer 2

如果您无法将.divider放在.row-4容器之外，那么您只需将边框添加到.row-4 div本身并删除所有.divider在一起。

<强> CSS

.row-4 {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 15px;
}

<强>结果

<强> JSFiddle