液体布局具有固定宽度的左手菜单

问题描述：

可能重复：

3和2列全屏（width& height）布局（CSS）

什么是最简单的，仅CSS的，跨浏览器的方式来实现以下CSS布局：

What is the simplest, CSS-only, Cross-browser way to achieve the following CSS Layout:

旁边是填充整个剩余区域的内容DIV。

A left hand menu DIV with a fixed Pixel width (e.g. 200px).
next to that, a content DIV filling the whole remaining area.

我之前做过绝对定位和东西，这些东西从来都不干净。现在我要转换旧的表格布局，认为时间是正确的做这个:)

I have done this before with things like absolute positioning and stuff, which never felt very clean. Now I have to convert an old table layout and think the time is right to do this properly :)

答

be：

<style type="text/css" media="all">

#left_hand {width: 200px;
            float: left;
            }

#main_content {margin: 0 0 0 200px; /* adjust for a gutter between divs */ }

</style>

<div id="left_hand">
<!-- content -->
</div>

<div id="main_content">
<!-- main content -->
</div>

液体布局具有固定宽度的左手菜单

相关推荐