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;
}

您可以在此处看到它的实际效果。