1. 首頁
  2. 問答
  3. 簡單的2列布局

簡單的2列布局

2010-08-06 100 views
1

我一直試圖讓這個權利在過去的3天... 我想要的只是簡單的2列布局在我的網站左邊的菜單欄。 問題是我無法獲得內容列以顯示與菜單列一致。無論我嘗試什麼，它只與菜單欄的底部邊界對齊。簡單的2列布局

我會使用負邊距，但我不喜歡將菜單欄固定高度的想法。 Float和Clear沒有幫助在所有...

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; margin-left: 200px; width: 790px; } 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div>

誰能告訴我什麼，我做錯了什麼？

更新：爲了正確地看到發生了什麼，我改變了.content的顏色，並看看它的確切位置。 似乎實際塊本身的位置正確，但該塊中的內容（頁面的實際內容）位於.sidebar塊的底部......

來源

2010-08-06 Logan Young

回答

1

您可能不想浮動內容div。左邊距將確保清除菜單，並且超出菜單高度的任何內容都會相應縮進。

嘗試......

.wrapper .sidebar { float: left; clear: left; display: block; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { margin-left: 200px; width: 790px; }

而且，azram19注意到了，菜單和內容的總寬度超過1000像素。我已經刪除了填充以解決此問題。菜單（191像素寬）和內容（200像素左邊距）之間仍有9像素的空白。

如果您需要填充（例如，如果div的有背景顏色或圖像），請確保您的10px的同時降低的div的寬度。

來源

2010-08-06 12:54:18

1 
.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6;} 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; width: 789px;}

此代碼將工作。通過讓margin-left:200px處於.content中，使其寬度爲 - 200 + 790 + 10 = 1000px。並刪除後，我不得不減少其中一列的寬度，因爲左列的寬度是190+10+1(border)，他們不能適應1000px寬度.wrapper。

來源

2010-08-06 12:42:18 azram19

5

大部分代碼都是多餘的。如果剔除不必要的部分，你會得到一個工作開始：

CSS：

#wrapper { margin-left: 100px; width: 1000px; border: 1px solid #bcbcc6; border-top:none; } 
#sidebar { float: left; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
#content { padding: 5px; margin-left: 200px; width: 790px; }

HTML：

<div id="wrapper"> 
    <div id="sidebar"> 
    </div> 
    <div id="content"> 
    </div> 
    <br style="clear:both"> 
</div>

注意，我轉過所有wrapper，sidebar，和content納入ID，因爲它們對於任何給定的頁面都是唯一的。類是每頁重複使用多次。

來源

2010-08-06 12:50:38

+0

+1清潔解決方案。不要忘記在清晰div上設置1px高度，字體大小和行高，這樣在舊瀏覽器中就不會獲得16px的空白空間。 – easwee 2010-08-06 14:16:06

0

內容不需要清晰的左邊和權限或左邊距。另外要注意的是，當你添加填充和一個增加框的整體大小的邊框。所以你的1000寬包裝盒裏面的盒子寬度超過1000像素，推動了內容盒。側邊欄是：190px（寬度）+（5px填充（兩邊））10px + 1px（邊框）= 201px總數。我刪除了清除，並將內容列減少到789px，以補償側欄上的1px邊框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; 
charset=iso-8859-1"> 
    <title>Untitled</title> 
</head> 
<body> 

<style type="text/css"> 
.wrapper { 
margin-left: 100px; 
width: 1000px; 
border-left: 1px solid #bcbcc6; 
border-right: 1px solid #bcbcc6; 
border-bottom: 1px solid #bcbcc6; 
} 
.wrapper .sidebar { 
float: left; 
display: block; 
padding: 5px; 
width: 190px; 
border-right: 1px solid #b6bcc6; 
} 
.wrapper .content { 
float: left; 
position: relative; 
padding: 5px; 
width: 789px; 
} 
</style> 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     content 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div> 

</body> 
</html>

來源

2010-08-06 17:47:38 tomvon

相關問題

 相關問題