54

我想要一个有两列的容器。细节：

容器

  • 宽度应调整为其父元素的 100%（很容易实现）。
  • 高度必须调整以包含两列（即它的高度应该完全等于两列中较大的高度，所以没有溢出和滚动条永远不会显示）
  • 最小尺寸应等于左列宽度的两倍。

一般的列

  • 应该是可变的高度，以适应其内容的高度。
  • 应该并排放置，以使它们的顶部边缘对齐。
  • 如果将边框、填充或边距的单个像素应用于其中任何一个，则不应破坏布局或相互包裹，因为这将非常不稳定和不幸。

左栏具体

  • 必须具有以像素为单位的固定绝对宽度。

右栏具体

  • 宽度必须填满容器中的剩余空间。换句话说...
  • 宽度必须等于容器宽度减去左列的宽度，这样如果我在该列中放置一个 DIV 块元素，将其宽度设置为 100%，将其高度设置为 10px，并为其设置背景颜色，我将看到一个 10px 高的彩色条带，从左列的右边缘到容器的右边缘（即它填充了右列的宽度）。

所需的稳定性

容器应该能够调整大小（通过调整浏览器窗口的大小）到其最小宽度（前面指定）或更大的宽度，而不会破坏布局。“中断”将包括左列完全改变大小（记住它应该具有固定的像素宽度），右列包裹在左列下方，出现滚动条，右列中的块元素未能占据整个列宽，并且通常上述任何规范都不能保持真实。

背景

如果使用浮动元素，则右列将不会包裹在左列之下，容器将无法包含两列（通过剪裁列的任何部分或允许列的任何部分溢出其边界)，或者滚动条会出现（所以我会厌倦建议使用除了溢出之外的任何东西：隐藏来触发浮动元素包含）。对列应用边框不应破坏布局。列的内容，尤其是右列的内容，不应破坏布局。

似乎有一个简单的基于表的解决方案，但在任何情况下它都失败了。例如，在 Safari 中，如果容器变得太小，我的固定宽度左列将缩小，而不是保持我指定的宽度。CSS 宽度似乎也是这种情况，当应用于 TD 元素时，它指的是最小宽度，这样如果在其中放置更大的东西，它就会扩展。我试过使用 table-layout:fixed; 没有帮助。我还看到了表示右列的 TD 元素不会扩展以填充剩余区域的情况，或者它会出现（例如，第三列 1px 宽将一直推到右侧），但是在右列周围设置边框将表明它的宽度仅与其内联内容一样宽，

我见过的一种可能的解决方案太复杂了；只要它在 IE8、Firefox 4 和 Safari 5 中工作，我就不会关心 IE6。

4

3 回答 3

83

干得好：

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

在此处查看实际操作：http: //jsfiddle.net/FVLMX/

于 2011-04-06T23:23:24.760 回答
21

我可以不关心 IE6，只要它适用于 IE8、Firefox 4 和 Safari 5

这让我很高兴。

试试这个：现场演示

display: table出奇的好。一旦您不关心 IE7，您就可以自由使用它。它实际上没有任何常见的缺点<table>。

CSS：

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}
于 2011-04-06T23:08:31.690 回答
0

小菜一碟。

使用960Grids 转到自动布局生成器并进行两列流体设计。建立一个与网格宽度一致的左列......这是使用网格的唯一挑战，一旦您阅读了教程，这将非常容易。简而言之，网格中的每一列都有一定的宽度，您可以设置要使用的列数。要获得恰好具有特定宽度的列，您必须调整数学以使列宽准确。不算太硬。

没有机会包装，因为其他人已经为你打了这场仗。尽可能地恢复兼容性。快速简单....现在，下载、自定义和部署。

瞧。网格 FTW。

于 2011-04-06T22:49:52.763 回答