简单的2列布局

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,因为它们对于任何给定的网页是独一无二的.每个类可以重复使用几次类.