html - 如何让我的 div 框放在一起

Question

我有这个 HTML 和 CSS，我想知道为什么我的 left-nav div 显示在 content-box 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>

score 2 · Accepted Answer

div 元素默认是块级元素。它们不允许您在同一行上有多个元素。

您需要的是使元素处于内联级别。这将允许多个元素彼此“串联”。

内联的问题是您不能像“块”元素一样设置高度和宽度。所以答案是内联块。该元素与其他内联块元素内联流动，但也允许高度和宽度等。

因此，您需要将 CSS 添加display:inline-block到“content-box”和“left-nav”元素中。

score 1 · Accepted Answer

你只需要：

用于float:left您的侧边栏和内容。这使他们走到线的左侧。当您需要两个（或更多）元素并排时，您应该使用它。阅读此内容以了解 float 的工作原理。
将侧边栏元素移动到内容之前。
也display:inline-block用于您的侧边栏和内容。所以他们可以有宽度和高度。
在它们之后添加一个元素clear:both。这清除了两边的浮动，并允许下一个元素没有浮动。
请注意，这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>

score 0 · Accepted Answer

另一种解决方案是创建一个包装器来包含列（左导航和内容），然后将这些列中的每一个浮动（分别在右侧和左侧）。查看下面的 CSS 和小提琴 @ 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;
}

score 0 · Accepted Answer

您应该尝试一下，将这两个 div 放在一个包装器中，并将孩子的显示样式设置inline-block为使孩子内联。它应该类似于：

HTML：

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

<div id="wrapper">
<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>
</div>

</body>
</html>

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;
    display: inline-block;
    }

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

html - 如何让我的 div 框放在一起

4 回答 4

Related

Reference