0

私はこの HTML と CSS を持っています。左ナビゲーション div がコンテンツ ボックス div の下に表示される理由を知りたいです。横並びにしてほしいです。

私を怒らせないでください。これはばかげた質問だと確信していますが、私は CSS であまり働いたことがなく、学ぼうとしています。

    @charset "utf-8";
   /* CSS Document */

 #header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}

#footer {
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}

#left-nav {
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
position: relative;

}

#content-box {
height: 500px;
width: 578px;
border: dashed #000;
margin-right: 0px;
margin-left: 155px;
margin-top: 0px;
margin-bottom: 0px;
}

. 

<body>

<div id="header">
this is the header
</div>

<div id="content-box">
</div>

<div id="left-nav">
<ul id="left-nav-links">
<li> <a href="#"> Link Item #1 </a></li>
<li> <a href="#"> Link Item #2 </a></li>
<li> <a href="#"> Link Item #3 </a></li>
<li> <a href="#"> Link Item #4 </a></li>
<li> <a href="#"> Link Item #5 </a></li>
</ul>
</div>

<div id="footer">
this is the footer
</div>

</body>
</html>
4

4 に答える 4

2

div 要素は、既定ではブロック レベルの要素です。同じ行に複数の要素を含めることはできません。

必要なのは、要素がインラインレベルであることです。これにより、複数の要素を互いに「インライン」にすることができます。

インラインの問題は、「ブロック」要素のように高さと幅を設定できないことです。したがって、答えはインラインブロックです。この要素は、他のインライン ブロック要素とインラインでフローしますが、高さや幅なども考​​慮します。

display:inline-blockそのため、「content-box」要素と「left-nav」要素の両方に CSS を追加する必要があります。

于 2013-10-28T19:56:44.723 に答える
1

あなたはただする必要があります：

  1. float:leftサイドバーとコンテンツに使用します。これにより、それらは行の左側に移動します。2 つ (またはそれ以上) の要素を並べて表示する必要がある場合は、これを使用する必要があります。フロートの仕組みについては、こちらをお読みください。

  2. サイドバー要素をコンテンツの前に移動します。

  3. display:inline-blockサイドバーやコンテンツにも使用できます。幅と高さを持つことができます。

  4. それらの後に要素を追加しclear:bothます。これにより、両側のフロートがクリアされ、次の要素がフロートを持たないようになります。

  5. border-widthは element としてカウントされないことに注意してくださいwidth。また、コンテンツには値が必要なくなりますmargin-right。

=================================

<html>
<head>
<style>
    @charset "utf-8";
   /* CSS Document */

    #header {
        height: 250px;
        width: 728px;
        border: dashed #000;
        text-align:center;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size:12px;
    }

    #footer {
        height: 28px;
        width: 728px;
        border: dashed #000;
        text-align:center;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size:12px;
    }

    #left-nav {
        float:left;
        display:inline-block;
        height: 500px;
        width: 150px;
        border: dashed #000;
        text-align: center;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size: 14px;
        position: relative;
    }

    #content-box {
        float:left;
        display:inline-block;
        height: 500px;
        width: 572px;
        border: dashed #000;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #clear{
        clear:both;
    }

    #container{
        display:inline-block;
    }
    body{
            text-align:center;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">
        this is the header
    </div>


    <div id="left-nav">
        <ul id="left-nav-links">
            <li> <a href="#"> Link Item #1 </a></li>
            <li> <a href="#"> Link Item #2 </a></li>
            <li> <a href="#"> Link Item #3 </a></li>
            <li> <a href="#"> Link Item #4 </a></li>
            <li> <a href="#"> Link Item #5 </a></li>
        </ul>
    </div>

    <div id="content-box">
    </div>

    <div id=clear></div>

    <div id="footer">
        this is the footer
    </div>
</div>
</body>
</html>
于 2013-10-28T20:07:12.807 に答える
0

別の解決策は、列 (​​左ナビゲーションとコンテンツ) を含むラッパーを作成し、これらの各列を (それぞれ右と左に) フロートすることを意味します。以下の CSS と fiddle @ http://jsfiddle.net/torovoltanrex/yrARC/を確認してください。

#header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville;
font-size:12px;
margin:0 auto;
}
#wrapper {
width:740px;
margin:0 auto;
padding:0;
}
#footer {
margin:0 auto;
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville;
font-size:12px;
clear:both;
}

#left-nav {
padding:0;
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville;
font-size: 14px;
float:left;

}

#content-box {
padding:0;
height: 500px;
width: 578px;
border: dashed #000;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
float:right;
}
于 2013-10-28T20:27:27.223 に答える