Question

我一直试图在过去3天内做到这一点...... 我想要的只是我网站上的简单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块的底部......

Answer 1

许多代码都是多余的。如果你去除不必要的部分，你就可以开始工作了：

<强> 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，因为它们对于任何给定的网页都是唯一的。每个类都可以重复使用几次类。

Answer 2

这可能是因为缺少min-height属性，但是，看看：

Super Simple Two Column Layout

The Demo

或者看：

Simple 2 column CSS layout

要了解如何使其跨浏览器：）

Answer 3

.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。

Answer 4

您可能不希望浮动内容div。左边距将确保它清除菜单，并且超出菜单高度的任何内容都会相应缩进。

试试这个......

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

另外，正如azram19注意到的，菜单和内容的总宽度超过了1000px。我删除了填充来解决这个问题。菜单（191px宽）和内容（200px左边距）之间仍然存在9px的差距。

如果你需要填充（例如，如果div有背景颜色或图像），请确保将两个div的宽度减少10px。

Answer 5

内容上不需要清除左侧和右侧或左侧边距。另外要小心，当您添加填充和边框时，会增加框的整体大小。所以你的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>

Answer 6

晚了好，从来没有。认为这可能会有所帮助：

htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

您可以查看此@ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

简单的2列布局

6 个答案: