Question

我有一个绝对定位的包装器，里面有一堆div：

<div class="wrapper">
    <div class="f inactive" style="width:12.5%"></div>
    <div class="f" style="width:9.722222222222223%"></div>
    <div class="f" style="width:9.722222222222223%"></div>
    <div class="f" style="width:9.722222222222223%"></div>
    <div class="f" style="width:9.722222222222223%"></div>
    <div class="f" style="width:9.722222222222227%"></div>
    <div class="f" style="width:9.722222222222227%"></div>
    <div class="f" style="width:9.722222222222227%"></div>
</div>

.wrapper {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: #000;
    padding:0;
    margin:0;
}


i {
    background-color: #83b209;
    width: 100%;
}

div.f {
    font-size: 0;
    height: 12px;
    position: relative;
    display: inline-block;
    background-color: #83b209;
}

div.f.inactive {
    background: red;
    opacity: 1;
}

jsfiddle是here。正如你所看到的，由于某些原因，当我希望它与内部div相同时，包装器比内部div更大。你不应该看到黑色的bacground ......

Answer 1

您可以在包装器中将line-height设置为0来解决此问题。

.wrapper {
    line-height: 0;
}

Answer 2

将height: 12px;放在.wrapper上并将height: 100%;放在div.f上

Answer 3

我updated your Fiddle通过在包装器上设置高度并在div中匹配它。

这实现了你想要的吗？

<div class="wrapper">
        <div class="f inactive" style="width: 12.5%"></div>
        <div class="f" style="width: 9.722222222222223%"></div>
        <div class="f" style="width: 9.722222222222223%"></div>
        <div class="f" style="width: 9.722222222222223%"></div>
        <div class="f" style="width: 9.722222222222223%"></div>
        <div class="f" style="width: 9.722222222222227%"></div>
        <div class="f" style="width: 9.722222222222227%"></div>
        <div class="f" style="width: 9.722222222222227%"></div>
    </div>

.wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
padding:0;
margin:0;

height:15px;
}


i {

background-color: #83b209;
width: 100%;
}

div.f {
font-size: 0;
height: 15px;
position: relative;
display: inline-block;
background-color: #83b209;
}

div.f.inactive {
background: red;
opacity: 1;
}

Answer 4

我会写这个小答案。

display: inline-block;导致此问题。您可能想要了解它的功能，但您似乎已尝试通过将<i></i>保持在一起并使用font-size: 0;来解决它。显然不适合你。

解决方法之一就是将font-size: 0;放在包装器上，因为它将它设置为低以影响输出。

<强> CSS：

.rangeslider-wrapper {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: #000;
    font-size: 0;
}

Demo here

另一种解决方案是使用float: left;而不是打扰display: inline-block;。

<强> CSS：

.rangeslider .rangeslider-bg i {
    font-size: 0;
    height: 12px;
    position: relative;
    float: left;
}

Demo Here

固定包装中的相对div

4 个答案: