html - 把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 应该固定并 float 在左侧。宽度 50%。所有其他的 div，都应该在右边，并且无论我添加多长时间和多少个 div，都应该继续在右边 float 。宽度也是 50%。

我在想这样的事情:

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

有什么建议吗？我只是对相对和绝对以及什么应该漂浮在哪里感到困惑...

我应该补充一点，div 1 和 2 应该“滚动”固定。所以位置:固定。这有点像 facebook newsfeed 的结构。

非常感谢任何帮助。 :)

Answer 1

我想我解决了你的问题。你可以使用这段代码来解决你的问题，它可能对我有帮助。你可以在第二列添加许多 div 但你应该使用这个 width:50%;背景:粉色；向左飘浮; margin-left:50%; CSS 代码。您可以根据自己的需要更改背景。

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%;

}

结果: