1. 首页
  2. 问答
  3. 简单的2列布局

简单的2列布局

2010-08-06 106 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

相关问题

 相关问题