0

任务是制作一个单独的进度条，所以我需要将 div 划分为 1-2-3-4-...n 次。这是一个代码：

.progress {
    width:  99%;
    height: 15px;
    padding: 0px;
}
.progress .danger {
    background-color: #dd514c;
}
.progress .warning {
    background: #ffaf4b;
}
.progress .success {
    background-color: #5eb95e;
}
.wrapper {
    border-left: 1px solid #7e7d7d;
}
.progress div {
    float: left;
}
<div class="progress">
    <div class="wrapper" style="width: 33%;">
        <div class="danger" style="width: 20%;"></div>
    </div>
    <div class="wrapper" style="width: 33%;">
        <div class="warning" style="width: 20%;"></div>
    </div>
    <div class="wrapper" style="width: 33%;">
        <div class="success" style="width: 100%;"></div>
    </div>
</div>

但在第三个 div (wrapper->success) 之后有一些空格（超过 5%）。如何预防？我的任务也是创建一个脚本来生成这个进度条，所以这里可能是 3 部分、2 部分甚至 5 部分，并且解决方案应该是通用的。

4

1 回答 1

1

对于初学者来说，包装元素.progress的宽度值设置为99%- 为什么？然后自然丢失 1%，因为您仅width: 33%用于子元素。

看起来您将父级设置为，width: 99%因为.wrapper元素一起占用了 99% 的可用空间。我可以看到你的想法，但这不是 CSS 的工作方式。

当您声明某物的百分比宽度时，该百分比始终是相对于元素的父宽度计算的。所以.wrapper有 33% 的宽度.progress，而.progress有 99% 的宽度，不管它是什么。

相应地更改您的 CSS：

.progress {
    width: 100%;
}

.wrapper {
    width: 33.333%; /* remove the inline CSS and use this instead */
}

我也喜欢在一行浮动元素中float: right的最后一个子元素上使用。这是为了在出现子像素时补偿潜在的舍入问题，将元素右边缘的空白向左移动，使其更难被注意到。

您的 CSS 中还有另一个问题；那是border在.wrapper。Border和padding-value 添加在宽度之上，因此您的.wrapper元素实际上是 33% 宽，每个元素距离边框 1px。如果您按照上面的建议将它们的宽度设置为 33.333%，这很可能会使您超过 100% 的宽度，从而破坏您的布局。

处理此问题的一种方法是简单地将边框移动到另一个子元素（以便将边框设置为您的 classes .danger，.warning而.success不是），或者将宽度从 33.333% 减小到更低的值（并且可能将最后一个子元素浮动到“隐藏”空白的权利）。

但是，我更喜欢处理此问题的方法是box-sizing将元素的 更改为border-box. 我不会在这里详细介绍，但它基本上改变了元素大小的计算方式，将边框和填充添加到元素的内部而不是外部。在此处或此处阅读有关它的信息。

于 2013-06-02T07:36:21.167 回答