0

横に並べる必要がある 2 つの div があります。このために、最初のものを絶対配置し、2番目のものに左マージンを追加しました。これは機能します。しかし、両方の高さが異なる可能性があり、下の要素は常に最高のものより下にある必要があるという問題があります。

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
</div>
<div id="footer">
   The footer
</div>

これは、フィドラーのコード全体です。

http://jsfiddle.net/qPtXL/17/

Javascriptなしでそれを解決するにはどうすればよいですか? また、フッターにマージントップを追加しても機能しませんでした。コンテンツの高さがわかりません。

4

4 に答える 4

3

jsFiddle の例

html:

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
   The footer
</div>

CSS:

#header {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

#contents .sidebar {
    width: 120px;
    float: left;
    background-color: gray;
}

#contents .body {
    margin-left: 120px;
    border: 1px solid green;
}

#footer {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

.clear { clear: both; }
于 2012-05-24T11:20:27.973 に答える
2

あなたはフロートと両側をクリアするように設定されたアイテムでそれを行うことができます

フィドル

于 2012-05-24T11:30:36.287 に答える
1

この方法で 2 列のスタイルを持つcss のみのレイアウトへのリンクを次に示します。この性質の積み重ねられた列のレイアウトもあります。あなたが苦労している理由は、絶対要素のせいです。absolute 属性を追加することで、そのコンテナー内のブロック要素のコレクションからその要素 (およびその高さ/幅) を削除しました。コンテナとの相対関係は維持されますが、周囲の要素には影響しなくなります。また、コンテナー自体に影響を与えることもありません (コンテナーを高くするなど)。この配置を適用する際には、コンテナの使用法をもう少し徹底して、要素が互いの配置を失うことなくコンテナを個別に引き延ばすようにする必要があります。

于 2012-05-24T11:15:23.520 に答える
0

このCSSを試してください

#header {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
    float: left;
    width: 100%
}

#footer {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
    float: left;
    width: 100%
}

#contents {
    width: 100%;
    height: auto;
    float;
    left;
}

#contents .sidebar {
    height: auto;
    width: 220px;
    float: left;
    border: 1px solid red;
}
于 2012-05-24T11:31:49.760 に答える