[英]CSS - fluid 3 column layout with float
I'm a newbie in CSS and I'm trying to apply the 3 column layout to CSS garden's html . 我是CSS的新手,我正在尝试将3列布局应用于CSS garden的html 。 Below is how I do it:
以下是我的工作方式:
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: CSS:
#pageHeader, #quickSummary
{
float: left;
clear: left;
}
#preamble, #explanation
{
margin-left: 100px;
margin-right: 100px;
}
#link
{
float: right;
}
Then the result turns out that the 3rd column is put under the remaining two columns and I don't know how to "push it up". 然后结果证明第3列被置于剩下的两列之下,我不知道如何“推它”。
I've tried it with Fiddle here . 我在这里尝试过Fiddle。 Please help me out and thanks.
请帮帮我,谢谢。
Edit: I forgot to mention that I'm not supposed to change the structure of the HTML file. 编辑:我忘了提到我不应该改变HTML文件的结构。 Thank you.
谢谢。
Simple approach in your case when height of elements are set would be to change: 在设置元素高度的情况下,简单的方法是更改:
#link {
float: right;
position: relative;
top: -100px;
}
or maybe even: 或者甚至是:
#link {
position: absolute;
top: 0;
right: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.