Question

我被朋友推荐使用div布局，但我无法让它工作。

我正在尝试完成以下图表：

+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+
|         |                  |            |
|         |                  |            |
|  Fixed  |     Whatever     |    Fixed   |
|  Width  |     Remains      |    Width   | Total Height = 500px
|    =    |      In All      |      =     | Total Width  = 600px
|   150   |    Directions    |     150    |
|         |                  |            |
|         |                  |            |
|         |                  |            |                    
+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+

基本上，转换 http://jsfiddle.net/qPgVx/。至 http://jsfiddle.net/blineberry/juckh/7/（但有div）

这不是任意的原因是因为整个表单可以用js动态调整大小，我希望中心在必要时扩展和收缩。

我的问题是我不能让中间填满高度。我该如何解决这个问题？

Answer 1

请参阅： http://jsfiddle.net/thirtydot/kBHCR/

正如您所看到的，当调整width的{{1}}和height时，所有内容都会调整大小。

这适用于IE7 +和所有现代浏览器。

它显然不适用于IE6。如果你需要支持IE6，你可以只使用IE6的IE6，或者你可以坚持使用.Window。如果你想支持IE6，需要付出代价。

<强> CSS：

<table>

Answer 2

我被朋友推荐使用div布局，

首先：“表是邪恶的”是一个神话。如果表适合您，则没有理由更改布局。

但我无法让它发挥作用。

这里不出意外:-)有多种方法可以用div来模拟一个表，但这并不是一件容易的事。也许那些说“不使用表”的人应该想出更简单可靠的方法来用CSS替换表。 CSS可以做很多事情但是很难在不使用JavaScript的情况下在CSS中创建几个具有相同高度的元素。

如果您仍想尝试（我建议您这样做，您可以了解CSS的限制），请在网上搜索“css mullti列布局”。

这是一篇很好的文章：Multi-Column Layouts Climb Out of the Box

Answer 3

您可以使用display:table属性

检查此示例

http://jsfiddle.net/qPgVx/17/

或

如果您有固定的身高，请按以下方式书写：

http://jsfiddle.net/qPgVx/20/

Answer 4

使用浮动div作为中间3个div。

.Window-Content-Left {   
  ... 
  float:left;
  ...
}

.Window-Content-Right {   
  ... 
  float:right;
  ...
}

如果需要，不要忘记清除浮子：

clear: both;

Answer 5

请参阅here或here 基本上，他们在中间<div>使用边距，然后将边栏放在边距内，特别注意相同高度的外观。

以下是jsfiddle

Answer 6

假设所有维度都已修复，您可以执行以下操作：

http://jsfiddle.net/qPgVx/9/

你基本上需要浮动所有三个中间div并使用另一个使用clear的div：两者。更多相关信息，您可以找到here

编辑：好的，所以你需要一个流畅的布局。我找到的最佳解决方案是以下示例：

http://www.alistapart.com/d/negativemargins/ex5.htm

来自这篇文章：

http://www.alistapart.com/articles/negativemargins/

中间列未扩展到100％高度的问题很常见，我用来解决它的技术称为“人造柱”。基本上你使用背景图像或模仿中间列背景颜色的包装div。上面的文章涵盖了这两个。

更多有关人造柱的信息：

http://www.alistapart.com/articles/fauxcolumns/

如何将此表格布局转换为div布局？

6 个答案:

http://jsfiddle.net/qPgVx/17/

http://jsfiddle.net/qPgVx/20/