Question

我很难设法使用html / css来布局以适应以下内容：

Layout

左侧区域是静态菜单。正确的区域是动态内容，使用对ASP.Net RenderBody方法的调用生成。你可能不相信，但我一直试图弄清楚这几个小时。我一直在左边部分的正确部分占据宽度的100％或根本不显示，Chrome的对象检查员说它的宽度为0像素。

我觉得自己像一个完全白痴，因为这看起来好像应该像饼一样容易。我能帮忙吗？

Answer 1

有几种方法可以解决这个问题。这是一个不是特别花哨而且直截了当的方式：

<body>
    <div id="menu">MENU</div>
    <div id="content"> content <br /> content <br /> content </div>
</body>

CSS：

div { border: 2px solid black; } /* demo purposes */

#menu {
    float: left;
    width: 150px;
}

#content {
    margin-left: 154px; /* menu width + (2 x menu.border-width) */
}

有关正常工作的样本，请参阅this jsfiddle。

Answer 2

此解决方案的另一个好处是，您的内容区域将占据其父级剩余宽度的100％：

<div class="parent">
    <div class="content">blah...</div>
    <div class="left-menu">blah...</div>
</div>

CSS：

.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }

关于流体布局的优秀教程：http://www.alistapart.com/articles/holygrail

适用于IE7及更高版本，Safari / Chrome / Opera / Firefox ......

Answer 3

执行此操作的最佳方法是使用已经考虑过安全的盒子大小调整属性。

看一下tinkerbin - ＆gt; http://tinkerbin.com/AcJjYk0r

它可以按照您的意愿运作。菜单的固定宽度，内容区域的基于百分比的宽度。

则...

...如果你想让背景颜色扩展到两个盒子之间的最高点（记住，菜单的一倍可以高于内容盒，反之亦然），那么唯一的方法去做（没有javascript）是使用背景图像并将其放在两个框下面。使用css3渐变（也可以安全使用），它非常简单。看看：

http://tinkerbin.com/3ETH28Oq

简单的html / css布局？（两栏）

3 个答案:

简单的html / css布局？ （两栏）

3 个答案:

简单的html / css布局？（两栏）