html - 如何防止CSS边框 float 到父div的顶部

Question

我希望我页面上的两个“训练边框”div 有自己的底部边框。

    <div class="component-content">
    <div class="reporting-div">
        <div class = "training-border">
            <div class="dots width-75-left row">
                <div>
                    How to Train Your Dragon
                </div>
                <div class="cell circle-blue"></div>
            </div>
            <div class="progress-text width-25-right">
                2 of 3
            </div>
        </div>
        <div class = "training-border">
            <div class="dots width-75-left row">
                <div>
                    How to Play Dumb in Poker
                </div>
                <div class="cell circle-blue"></div>
            </div>
            <div class="progress-text width-25-right">
                2 of 3
            </div>
        </div>
    </div>
</div>

两者都使用以下 css 样式:

.circle-blue {
  width: 10px;
  height: 10px;
  background: deepskyblue;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.circle-gray {
  width: 10px;
  height: 10px;
  background: lightgray;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.cell {
  margin-left: 5px;
  display: inline-block;
  font-size: 6px;
}
.row {
  display: table-row;
  padding: 3px;
}
.width-75-left {
  width: 75%;
  float: left;
}
.width-25-right {
    width: 25%;
    float: right;
    text-align: right;
}
.reporting-div {
    width: 100%;
}
.training-border{
    border-style: solid;
    border-bottom: thick dotted #ff0000;
}
.component-content {
    display: inline-block;
    margin: 20px;
}

不过，最终发生的是第二个 div 的 border-bottom float 到第一个 div 的最顶部。我想完成以下任务:

1. 给每个“training-border”div 自己的 border-bottom，没有边框 float 到第一个 div 的顶部
2. 在对其他 .css 类进行最少修改的情况下执行上述操作

这是 plnkr 链接。注意第二个 div 的底部边框如何 float 到第一个 div 的顶部:

http://plnkr.co/edit/WlsscFkmbuOocEnrz8IX?p=preview

Answer 1

您需要清除 float 。

一种方法是:

.training-border{
    border-style: solid;
    border-bottom: thick dotted #ff0000;
    overflow: hidden; /* this */

}

Demo