2

做这个简单的事情的最好方法是什么？

  • 左列，固定宽度，背景为黄色
  • 主列，屏幕的其余部分

主列将包含不定长度的文本，无论内容是什么，我都希望左列与主列一样高。没有页眉，没有页脚，只是屏幕一分为二，但左边必须填满主程序占用的所有空间。没有 JavaScript。

谢谢。

编辑：这个（非常基本的布局）可以在没有背景图像或荒谬边距值等技巧的情况下完成吗？我正试图从被鄙视的表格方法中继续前进，但到目前为止，我看到只有 CSS 的布局即使是做最简单的事情也总是需要一些技巧。

4

4 回答 4

1

我通常有两个 div：外部 div 包含我希望与主列具有相同高度的侧边栏内容，内部 div 将是主列。

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

这样，内部/主 div 会强制外部/侧边栏 div 与内部/主 div 高度相同。只是float:right内部/主 div，将外部/侧边栏 div 设置为width:100%，并指定内部/主 div 有一个左边距，以允许侧边栏，例如margin-left:20%.

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

更新： 抱歉，我的侧边栏内容显示在错误的位置。它应该在内部/主 div下方，以便内部/主 div 在浮动时显示在其右侧。示例 CSS：

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}
于 2009-11-23T18:08:54.810 回答
1

所以基本上对“可以不用技巧就可以做到”这个问题的答案是：不。

于 2009-12-04T11:48:36.437 回答
0

这是一个快速的模型。主列在您使用时水平填充。如果您已经知道左列宽，则可以设置主列宽。

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

希望这对你有用。

于 2009-11-23T20:23:40.497 回答