HTML+CSS : how to move not close divs to create a right column?

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 属性大小定义为石南花高度的函数，但我找不到任何方法来仅使用 CSS 来实现。

谢谢!

Answer 1

嗯...作为对您问题的直接回答，您可以结合使用 float 和 % 宽度来完成此操作。您也可以使用固定宽度，但您必须确定这些尺寸是多少。这是一个简单的实现:

Demo

---

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>