Question

我的设计很简单。左侧是导航栏，右侧是内容div。我只是向左漂浮并向右漂浮它起作用 - 除非显示器太宽。然后导航栏远离左侧（就像它应该的那样），但内容紧贴在右侧。中间是空的空间。我希望内容紧贴左侧导航栏旁边。

我该如何做到这一点？

Answer 1

如何将它们浮动到左侧并使用百分比值来设置它们的宽度。如下所示：

#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}

或者，如果您想要修复侧边栏的大小并让内容填充剩下的空间，您可以执行以下操作（我一直使用它）：

HTML：

<div id="content"><div class="in">
CONTENT HERE
</div></div>

<div id="sidebar">
SIDEBAR HERE
</div>

CSS：

#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
     #content .in {margin-right:300px;
                   /*sidebar's width or more for space between blocks*/}

Answer 2

有很多方法可以做到这一点。

取决于：

如果您需要固定宽度布局或相对布局。
如果您希望布局居中或不居住。
等

您想要的草图或/和您的实际代码会有所帮助。

无论如何，如果您不了解CSS布局，可以使用像blueprint这样的CSS框架，它易于使用，并且可以自行处理您当前的问题。

CSS两列布局对齐左？

2 个答案: