0

我正在尝试创建一个基本布局，其中有一个标题、一个左列、内容区域和右列。当我设置左侧菜单（左列）的边距顶部时，它不会将 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/

4

1 回答 1

0

检查这个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>

​</p>

于 2012-04-26T02:39:44.230 回答