我是 CSS 的新手,我正在尝试将 3 列布局应用于 CSS garden's 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;
}
然后结果发现第3列在剩下两列的下面不知道怎么“上推”。
我已经用 Fiddle 试过了 here .请帮帮我,谢谢。
编辑:我忘了说我不应该更改 HTML 文件的结构。谢谢。
最佳答案
在设置元素高度的情况下,简单的方法是更改:
#link {
float: right;
position: relative;
top: -100px;
}
或者甚至:
#link {
position: absolute;
top: 0;
right: 0;
}
关于html - CSS - 带 float 的流体 3 列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12672131/