5

标题说了算。我想要一个 2 列 CSS 布局：

  • 居中 - 主要内容以页面为中心
  • 具有固定（像素）的右列宽度
  • 有一个流畅的左列 - 用完所有可用空间减去右列宽度
  • 源代码排序 - 在 HTML 源代码中，左列内容位于右列内容之前
  • 允许最小宽度 - 在我的示例中为 760px
  • 允许最大宽度 - 在我的示例中为 1024px

如果窗口大于最大宽度，则内容将在页面的最大值处居中。如果窗口小于最大宽度，则内容会填充 100% 的页面，除非它小于最小宽度会出现水平滚动条。

我愿意使用一些小的 javascript 来处理不支持这些属性的浏览器的最小/最大宽度（我在看你 IE6），但我也愿意让这部分布局降级.

桌子很简单。我已经浏览了数百个示例布局，没有什么可以完成我所要求的所有事情，尽管有几个接近。问题似乎在于以相同的样式获得流畅的左列和源排序。我发现了几个具有正确源顺序的固定左/流体右（与我想要的相反）的示例，或没有源顺序的流体左/固定右的示例，但不是两者兼而有之。

我不在乎它是否使用浮动或负边距，但我想避免绝对定位。

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+
4

3 回答 3

3

我强烈建议您查看Dynamic Drive 上的 CSS 模板。第 5 个下来应该是您正在寻找的（流体固定）。只需在主容器元素中添加一个max-widthand就可以了。min-width

仅供参考，这些是非常好的模板，可用作页面布局的基础。使用 CSS 是学习很多关于浮动和定位的好方法，它确实在我早期的 Web 开发中帮助了我。

于 2010-07-16T01:21:07.347 回答
1

我的尝试： http ://www.ryankinal.com/fluid/

它并不完全有效，但这只是因为在非常小的窗口尺寸下，我的负边距会导致内容从页面上掉下来。这是理论：

  1. 一定百分比的容器
  2. 左列在容器的 100% 处，并向左浮动
  3. 右列以 0% 宽度包裹，浮动右包裹
  4. 固定宽度的右列（在我的示例中为 200px）
  5. 左列和右列左边距为右列宽度的一半（在我的示例中为 100px）

所以，右栏越大，内容脱落的可能性就越大。但这与我在一个小时左右的时间里得到的一样接近。由于将右列包装在一个无关的 div 中并利用了溢出，这也有点骇人听闻：可见。

但他们是我的公爵（现在）。

于 2010-07-16T02:26:03.760 回答
0

你在寻找这样的东西吗？（负边距+浮动+正确的源顺序+固定的权利）

http://blog.html.it/layoutgala/LayoutGala23.html

索引页面上的更多布局：http: //blog.html.it/layoutgala/

然后只需将最小/最大宽度附加到容器。

于 2010-07-16T01:22:54.333 回答