把5個div分成2列，2個固定在左邊

Question

我有過很長的挑戰，現在我只需要尋求幫助。

我有div的容器：

<div id="container"> 
<div id="1">Bla</div> 
<div id="2">Bla</div> 
<div id="3">Bla</div> 
<div id="4">Bla</div> 
<div id="5">Bla</div> 
</div> 

現在，DIV 1和2應固定和浮動在左側。寬度50％。所有其他divs都應該在右邊，並且無論多長時間以及添加多少個div，都會繼續在右邊浮動。寬度也是50％。

的是這樣的即時通訊思想：

|--1--|--3--| 
|--2--|--4--| 
|-----|--5--| 
|-----|--6--| 
|-----|-----| 

任何提示嗎？我只是相對和絕對的困惑，什麼是應該漂浮在哪裏...

我應該加，div 1和2應該是「滾動」固定。所以位置：固定。它有點如何Facebook的新聞源是strcutured。

任何幫助，非常感謝。 :)

Answer 1

我想我解決了你的問題。你可以使用這個代碼來解決你的問題，它可能會幫助我。你可以在第二列添加很多div，但你應該使用這個width:50%; background:pink; float:left; margin-left:50%; css代碼。您可以根據您更改background。

Live Working Demo

HTML代碼：

<div id="container"> 
<div id="one">1</div> 
<div id="two">2</div> 
<div id="three">3</div> 
<div id="four">4</div> 
<div id="five">5</div> 
<div id="six">6</div> 
<div id="seven">7</div> 
</div> 

CSS代碼：

#container 
{ 
    width:100%; 
    height:100%; 
} 
#one 
{ 
    width:50%; 
    background:red; 

} 
#two 
{ 
    width:50%; 
    background:green; 
    float:left;vertical-align:top; 

} 
#three 
{ 
    width:50%; 
    background:blue; 
    float:left; 
    margin-top:-20px; 
} 
#four 
{ 
    width:50%; 
    background:gray; 
    float:left; 
    margin-left:50%; 
    margin-top:-20px; 

} 
#five 
{ 
    width:50%; 
    background:violet; 
    float:left; 
    margin-left:50%; 

} 
#six 
{ 
    width:50%; 
    background:gold; 
    float:left; 
    margin-left:50%; 

} 
#seven 
{ 
    width:50%; 
    background:pink; 
    float:left; 
    margin-left:50%; 

} 

結果：