Div在另一个div内形成一条线

Question

如何创建宽度大小为div的div：1024px，height：200px，另一个div位于起始位置，大小为990px​​宽度：20px，高度：200px，形成一条线。

我开始做，但我没有进展：

以下是代码：

CSS：

div.wrap, div.header
{
    width:1024px;
    margin:0 auto;
}
div.header, header1
{
    height:100px;
    background-color:Purple;
}
div.header header1
{
    background-color:Gray;
    left:990px;
    position:fixed;
}

HTML

<div class="wrap">
<div class="header">
    <div class="header1"></div>
</div>
</div>

应该是结果：

Answer 1

修改：请注意，您的css中有拼写错误，应该是.header1而不是header1。

回答你的问题：

div.wrap, div.header
{
    width:1024px;
    margin:0 auto;
    position: relative;    // added
}
div.header, .header1    // typo fixed, header1 is not a valid element
{
    height:100px;
    background-color:Purple;
}
div.header header1
{
    background-color:Gray;
    left:990px;
    position:absolute;    // changed
    width: 20px;    // added
}

但是，您不能只使用border属性吗？

Answer 2

这样的东西？ http://jsfiddle.net/5ZuUZ/