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/