html - CSS - 带浮动的流体 3 列布局

Question

我是 CSS 的新手，我正在尝试将 3 列布局应用于CSS Garden 的 html。以下是我的做法：

HTML：

<div id="container">
    <div id="pageHeader">Hello</div>
    <div id="quickSummary">Hello 1</div>
    <div id="preamble">Hello 2</div>
    <div id="explanation">Hello 3</div>
    <div id="link">List</div>
</div>​

CSS：

#pageHeader, #quickSummary
{
    float: left;
    clear: left;
}
#preamble, #explanation
{
    margin-left: 100px;
    margin-right: 100px;
}
#link
{
    float: right;
}

然后结果证明，第三列放在了剩下的两列下面，我不知道如何“向上推”。

我在这里用 Fiddle 试过了。请帮帮我，谢谢。

编辑：我忘了提到我不应该更改 HTML 文件的结构。谢谢你。

Answer 1

在设置元素高度时，您的简单方法是更改​​：

#link {
  float: right;
  position: relative;
  top: -100px;
}

甚至可能：

#link {
  position: absolute;
  top: 0;
  right: 0;
}