HTML / CSS中的垂直条

Question

我如何构建垂直条，它们彼此相邻（触摸）从页面左侧到中间（宽度都相同）？

Answer 1

这可以帮到你：

<div id="wrapper">
    <div class="bar green"></div>
    <div class="bar greener"></div>
    <div class="bar greenest"></div>
    <div class="bar greenerest"></div>
</div>

和CSS一起使用它：

html, body, #wrapper, .bar {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    width: 50%;
}

.bar {
    float: left;
    width: 25%; /* must never add up to more than 100% */
}

.green {
    background-color: #a8ff00;
}

.greener {
    background-color: #7ad800;
}

.greenest {
    background-color: #3eb603;
}

.greenerest {
    background-color: #2c7e03;
}

你可以看到它in action here。