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

Question

如何创建一个宽度为1024px，高度为200px的div和另一个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> 

如同d为结果：

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/