HTML/CSS 中的竖线

【问题标题】：Vertical Bars in HTML/CSSHTML/CSS 中的竖线
【发布时间】：2010-07-28 10:15:03
【问题描述】：

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

【问题讨论】：

澄清一下，您在寻找什么样的竖线？内容列？在您的布局中分隔列？或者你的意思是背景中的垂直线？抱歉，我不完全确定您在寻找什么。
您可能会为此目的使用图片。
回滚更改为“删除帖子”胡言乱语，没有理由这样做，这对花时间给出答案的人不公平

【解决方案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。

【讨论】：