不能得到div邊緣頂部工作

我想創建一個基本的佈局，在那裏你有一個頭，一個左列，內容區和右列。當我設置leftmenu（左上角）的margin-top時，它不會推低div。我希望div位於標題下方並且有一個邊框。不能得到div邊緣頂部工作

.leftmenu的maring-top無法使用。我想這在標題div下有一個邊框。

CSS

body 
    { 
    position:absolute; 
    top:0px; 
    left:0px; 
    margin:0px; 
    background-color:yellow; 
    } 
    .header 
    { 
    background-color:#b0c4de; 
    border: 0px solid black; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    } 
    .topmenu 
    { 
    margin-top:100px; 
    } 
    .topmenu ul 
    { 
      margin-left:280px; 
      margin-bottom:2px; 
      width:800px; 
    } 
    .topmenu li 
    { 
    display:inline; 
    width:120px; 
    border:1px solid green; 
    margin-left:8px; 
    padding:4px; 
    text-align:center; 
    } 

    .topmenu li a 
    { 
    border : 0px; 
    text-decoration:none; 
    } 
    .leftmenu 
    { 
    height:100%; 
    border:1px solid black; 
    width:200px; 
    padding-top:150px; 
    margin-top:150px; 
    } 
    .leftmenu ul 
    { 
    list-style-type: none; 
    margin:0px; 
    margin-left:3px; 
    }

HTML

<body> 
    <div class="header"> 
     <div class="topmenu"> 
      <ul> 
       <li><a href="#">Some Link1</a></li> 
       <li><a href="#">Some Link2</a></li> 
       <li><a href="#">Some Link3</a></li> 
       <li><a href="#">Some Link4</a></li> 
       <li><a href="#">Some Link5</a></li> 
       <li><a href="#">Some Link6</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="leftmenu"> 
      <ul> 
       <li><a href="#">Some Link1</a></li> 
       <li><a href="#">Some Link2</a></li> 
       <li><a href="#">Some Link3</a></li> 
      </ul> 
    </div> 
    <div class="content"> 
     &nbsp; 
    </div> 
    <div class="rightmenu"> 
       <ul> 
        <li><a href="#">Some Link1</a></li> 
        <li><a href="#">Some Link2</a></li> 
        <li><a href="#">Some Link3</a></li> 
       </ul> 
    </div> 
</body>

見小提琴http://jsfiddle.net/XBxNs/

來源

2012-04-25 user1357084

看看這個，如果它有幫助 - http://matthewjamestaylor.com/blog/perfect-3-column.htm – Asif 2012-04-25 20:03:53

入住這http://jsfiddle.net/nalaka526/7Q3Jf/1/

<html> 
<head> 
    <style type="text/css"> 
    body 
    { 
    position:absolute; 
    top:0px; 
    left:0px; 
    margin:0px; 
    background-color:yellow; 
    } 
    .header 
    { 
    background-color:#b0c4de; 
    border: 0px solid black; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
     height: 100px; 
    } 
    .topmenu 
    { 
    margin-top:100px; 
    } 
    .topmenu ul 
    { 
    margin-left:280px; 
    margin-bottom:2px; 
    width:800px; 
    } 
    .topmenu li 
    { 
    display:inline; 
    width:120px; 
    border:1px solid green; 
    margin-left:8px; 
    padding:4px; 
    text-align:center; 
    } 

    .topmenu li a 
    { 
    border : 0px; 
    text-decoration:none; 
    } 
    .leftmenu 
    { 
    height:100%; 
    border:1px solid black; 
    width:200px; 


     display:table-cell; 
    } 
    .leftmenu ul 
    { 
    list-style-type: none; 
    margin:0px; 
    margin-left:3px; 
    } 

     .content 
    { 
    display:table-cell; 
     width:400px; 
    } 
     .rightmenu 
    { 
    display:table-cell; 
     float: right; 
    } 

    </style> 
</head> 
<body> 
    <div class="header"> 
     header 
    </div> 
    <div class="topmenu"> 
     topmenu 
     <ul> 
      <li><a href="#">Some Link1</a></li> 
      <li><a href="#">Some Link2</a></li> 
      <li><a href="#">Some Link3</a></li> 
      <li><a href="#">Some Link4</a></li> 
      <li><a href="#">Some Link5</a></li> 
      <li><a href="#">Some Link6</a></li> 
     </ul> 
    </div> 
    <div class="leftmenu"> 
     leftmenu 
     <ul> 
      <li><a href="#">Some Link1</a></li> 
      <li><a href="#">Some Link2</a></li> 
      <li><a href="#">Some Link3</a></li> 
     </ul> 
    </div> 
    <div class="content"> 
     content&nbsp; 
    </div> 
    <div class="rightmenu"> 
     rightmenu 
     <ul> 
      <li><a href="#">Some Link1</a></li> 
      <li><a href="#">Some Link2</a></li> 
      <li><a href="#">Some Link3</a></li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2012-04-26 02:39:44 Nalaka526

不能得到div邊緣頂部工作

回答

相關問題