html - 将div分成相等的部分

Question

任务是制作一个单独的进度条，所以我需要将 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(包装器->成功)之后有一些空白(超过 5%)。如何预防？ 我的任务也是创建一个脚本来生成这个 progressbat，所以这里可能是 3 部分，2 部分甚至 5 部分，解决方案应该是通用的。

Answer 1

首先，包装元素 .progress 的宽度值设置为 99% - 为什么？然后有 1% 自然缺失，因为您只对子元素使用 width: 33%。

您似乎将父级设置为 width: 99%，因为 .wrapper 元素一起占用了 99% 的可用空间。我能理解您的想法，但这不是 CSS 的工作方式。

当您声明某物的百分比宽度时，该百分比始终是根据元素的父级宽度计算的。所以 .wrapper 的宽度是 .progress 的 33%，而 .progress 的宽度是其父级的 99%，无论它是什么可能是。

相应地更改您的 CSS:

.progress {
    width: 100%;
}

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

我还喜欢对 float 元素行中的最后一个 子元素使用float: right。这是为了补偿 sub-pixels 时潜在的舍入问题。发生，将元素右边缘的空白移动到左侧，使其更难被注意到。

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

处理这个问题的一种方法是简单地将边框移动到另一个子元素(以便将边框设置为您的类 .danger、.warning 和 .success)，或者将宽度从 33.333% 减小到更低(并且可能将最后一个子项 float 到右侧以“隐藏”空白区域)。

然而，我更喜欢处理这个问题的方法是将元素的 box-sizing 更改为 border-box。我不会在这里和现在详细介绍，但它基本上改变了元素大小的计算方式，将边框和填充添加到元素的内部而不是外部。了解一下 here , 或 here .