简单的2列布局 [英] Simple 2 column layout

问题描述

我一直在试图得到这个正确的过去3天现在...
我想要的是简单的2列布局在我的网站上，左侧的菜单栏。
问题是我不能得到内容列显示与菜单列一致。无论我尝试什么，它只与菜单栏的底部边框对齐。

I've been trying to get this right for the last 3 days now... All I want is simple 2 column layout on my website with the menu bar on the left. The problem is I can't get the content column to display in line with the menu column. No matter what I try, it only lines up with the menu column's bottom border.

我会使用负边距，但我不喜欢做菜单栏固定高度。
Float 和清除根本不起作用...

I'd use negative margins, but I don't like the idea of making the menu bar a fixed height. Float and Clear aren't helping at all...

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

有人能告诉我我做错了什么吗？

Can someone tell me what I'm doing wrong?

更新：只是为了看到发生了什么，我改变了 .content 的颜色，看看它是什么。
看起来实际的块本身是正确的位置，但是该块中的内容（页面的实际内容）在 .sidebar block ...

UPDATE: Just to see exactly what's happening, I changed the color of .content and had a look where it is exactly. It seems that the actual block itself is correctly in position, but that the content in that block (the actual content of the page) is at the bottom of the .sidebar block...

推荐答案

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

You probably don't want to float the content div. The left margin will ensure it clears the menu and that any content beyond the height of the menu is indented accordingly.

尝试此操作...

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

此外，当azram19注意到，菜单和内容的总宽度超过1000px。我删除了填充来解决这个问题。您的菜单（191像素宽）和您的内容（200像素左边距）之间仍然会有9像素的间距。

Also, as azram19 noticed, the total width of the menu and content exceeds 1000px. I've removed the padding to fix this. There will still be a 9px gap between your menu (191px wide) and your content (200px left margin).

如果您需要填充（例如，如果div有背景颜色或图片），请务必将两个div的宽度减小10像素。

If you need the padding (e.g. if the divs have background colours or images), make sure you reduce the widths of both divs by 10px.

这篇关于简单的2列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！