如何讓我的div盒一起去

我有這個HTML和CSS，我想知道爲什麼我的left-nav div顯示在content-box 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>

來源

2013-10-28 user2880722

div元素是默認塊級元素。他們不允許你在同一行上有多個元素。

您需要的是元素是內聯級別的。這將允許多個元素相互「在線」。

內聯問題，你不能像設置「塊」元素那樣設置高度和寬度。所以答案是內聯塊。此元素與其他內嵌塊元素內聯，但也允許高度和寬度等。

因此，您需要將CSS display:inline-block添加到「content-box」和「left-nav」元素。

來源

2013-10-28 19:56:44

您應該嘗試一下，將這兩個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; 
    }

來源

2013-10-28 19:59:19

你只需要：爲您的側邊欄和內容

使用float:left。這使他們走到線的左側。當你需要兩個（或更多）元素時，你應該使用它。 read this for a description on how float works。
將側邊欄元素移至內容之前。
也使用display:inline-block爲您的側邊欄和內容。所以他們可以有寬度和高度。
在它們後面添加一個元素clear:both。這會清除雙方的浮動，並允許下一個元素不會浮動。
請注意border-width不能算作元素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-28 20:07:12

你的工作很完美，清楚的是幹什麼的？ – user2880722

除此之外，它不允許我居中集中所有的div，如果我只將它們居中並且頁腳居中，那麼我如何居中左導航和內容框？ – user2880722

它需要一個容器來居中，看到我更新的代碼，它現在居中！ :) –

另一種解決方案意味着創建一個包含列的包裝（left-nav和content），然後將這些列分別浮動（分別向右和向左）。看看下面的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; 
}

來源

2013-10-28 20:27:27 WolfishMoon

如何讓我的div盒一起去

回答

相關問題