液体布局具有固定宽度的左手菜单 [英] Liquid Layout with fixed width left hand menu

问题描述

可能重复：

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

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

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

<左侧菜单DIV，具有固定的像素宽度（例如200像素）。

• 旁边是填充整个剩余区域的内容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>

这篇关于液体布局具有固定宽度的左手菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！