Question

我想使用div来对齐页面上的内容。假设我想对齐左侧的菜单（页面的20％）和右侧其余空间的文章（80％或更少）。我目前在一个div内创建两个分区，左右浮动，并以百分比设置宽度。这种方法有时有效，有时它不起作用。有些朋友建议我应该使用桌子。我是不是该？我认为表格只是一个短期解决方案，并不遵循编码页面的实际方式。还有其他更高效的方式吗？（编辑：没有添加任何代码）

    <style>
    div#menu {
      width:75%;
      float: left;
    }
    div#menu ul{
      padding:0;
      }
    div#menu ul li{
      display: inline;
      }
    div#menu ul li a{
      background-color: green;
      color: black;
      padding:10px 20px;
      text-decoration: none;
      border-radius: 4px 4px 4px 4px;
    }
    div#menu ul li a:hover{
        background-color: orange;
     }
    div#menu ul li.icons {
      display: inline;
      }
    div#menu ul li.icons a{
      background-color: white;
      padding: 0px 0px;
      text-decoration: none;
      border-radius: 0px 0px 0px 0px;
    }
    div#social{
      float: right;
      width:20%;
      clear: none;
    }
    div#social ul{  
      list-style-type: none;
    }

    div#social ul li{
    display: inline;
    }
    </style>

    <div>

    <div id="social">
    <ul>
    <li>Connect with me: </li>  
    <li class="icons"><a href="http://www.facebook.com/some"><img       src="Images/Facebook-256.png" width="24px" height="24px"></a></li>
    <li class="icons"><a href="mailto:some@uic.edu"><img   src="Images/Google.ico" width="24px" height="24px"></a></li>

   </ul>
   </div>  
   <div id="menu">  
   <ul>  

   <li><a href="http://alathw2.people.uic.edu">Home</a></li>
   <li><a href="#">Resume</a></li>
   <li><a href="http://alathw2.people.uic.edu">Interesting Things</a></li>
   </ul>
   </div>
   <div style="clear:both;"></div>
   </div>

令人惊讶的是，此代码有效。但我想知道是否还有其他一些有效的选择。假设我想对齐三个块而不是两个块。

Answer 1

请试试这个。我创建了一个简单的轮廓。

  <style>

 .main{
 width:100%;
}
.left_menu{
 background:gray;
 width:20%;
float:left;
}
.right_article{
 background:tan;
 width:60%;
 float:left;
 }
.social{
background:green;
width:20%;
float:right;
}
.clearfix{
clear:both;
}

</style>


<div class="main" >
<div class="left_menu" >
    Menu
</div>
<div class="right_article">
    Article
</div>
<div class="social">
    Social
</div>
<div class="clearfix"></div>
</div>

我应该如何使用div来有效地对齐页面上的内容？

1 个答案: