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 */
}

我还想在一行浮动元素的 last 子元素上使用float: right。这是为了补偿sub-pixels发生时潜在的舍入问题，将元素右边缘的空白区域向左移动，使其更难注意到。

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

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

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

div将div分成相等的部分

1 个答案: