3

私はCSSの初心者で、3列のレイアウトをCSSガーデンの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番目の列が残りの2つの列の下に配置され、「押し上げる」方法がわかりません。

ここでフィドルで試してみました。私を助けてくれてありがとう。

編集：HTMLファイルの構造を変更することは想定されていないことを忘れました。ありがとうございました。

4

1 に答える 1

1

要素の高さが設定されている場合の簡単なアプローチは、次のように変更することです。

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

または多分:

#link {
  position: absolute;
  top: 0;
  right: 0;
}
于 2012-10-01T11:16:56.990 に答える