HTML+CSS：如何移动不关闭的div来创建右列？

Question

我有一个我认为很简单的问题，但花了我很多时间来解决它。如果有一个简单的解决方案（并且我不太了解CSS），请指出我，我会立即关闭这个问题。

我的问题如下。

我有 6 个 div 一个在另一个之上，类似于：

<div id="header">header content</div>
<div id="sidebar1">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="maincontent2">maincontent2 content</div>
<div id="sidebar2">sidebar2 content</div>
<div id="footer">footer content</div>

我想要的是类似于：

-----------------------------------------------------------
| header content                                          |
-----------------------------------------------------------
--------------------------------------  -------------------
| maincontent content                |  | sidebar1 content|
|                                    |  -------------------
|                                    |  -------------------
|                                    |  | sidebar2 content|
|                                    |  -------------------
--------------------------------------
--------------------------------------
| maincontent2content                |
|                                    |
|                                    |
|                                    |
|                                    |
--------------------------------------
-----------------------------------------------------------
| footer content                                          |
-----------------------------------------------------------

换句话说，有没有办法创建一个右列，即使这些 div 不是一个接一个仅使用 CSS 并且不移动代码中的div？

我尝试对 sidebar1 使用以下 css

 position:absolute;
 top:3em;
 right:0;

，对 sidebar2 使用以下 css，

 position:absolute;
 top:9.5em;
 right:0;

但我的印象是这不是正确的方法。

一个简单的方法可能是将 top 属性大小定义为 Heather 高度的函数，但我找不到任何仅使用 CSS 来实现的方法。

谢谢！

Answer 1

嗯...作为您问题的直接答案，您可以使用浮点数和％宽度的组合来完成此任务。您还可以使用固定宽度，但您必须确定这些尺寸。这是一个简单的实现：

演示

---

CSS

#maincontent
{
    float:left;
    width:70%;
    background:#ee5;
}

#sidebar2,#sidebar1
{
    float:right;
    width:30%;
    background:#5e5;
}

#footer
{
    clear:both;
    background:#5ee;
}

#header
{
    background:#55e;
}

HTML

<div id="header">header content</div>
<div id="sidebar1" class="side">sidebar1 content</div>
<div id="maincontent">maincontent content</div>
<div id="sidebar2" class="side">sidebar2 content</div>
<div id="footer">footer content</div>