我该如何将这个表格布局转换为 div 布局？

Question

我该如何将这个表格布局转换为 div 布局？

4

我的朋友推荐我使用div布局，但我无法使其工作。

我尝试实现以下图表：

+-----------------------------------------+
|           固定高度 = 50                 |
+-----------------------------------------+
|         |                  |            |
|         |                  |            |
|  固定   |     任意宽度     |    固定   |
|  宽度   |      保持不变    |    宽度   | 总高度 = 500px
|    =    |       全部方向    |      =     | 总宽度 = 600px
|   150   |                   |     150    |
|         |                  |            |
|         |                  |            |
|         |                  |            |                    
+-----------------------------------------+
|           固定高度 = 50                 |
+-----------------------------------------+

基本上需要将http://jsfiddle.net/qPgVx/转换成带有div的http://jsfiddle.net/blineberry/juckh/7/。

这样做的原因是整个表格可以通过js动态调整大小，我希望中间部分根据需要进行扩展和收缩。

我的问题是我无法使中间部分填充高度。我该怎么办？

- chacham15

那么，所有的尺寸都是固定的吗？即使中间看起来是（宽300像素，高400像素）。 - thirtydot

另外，您需要支持哪些浏览器？IE7吗？ - thirtydot

问题在于整个东西都是通过js动态调整大小的。因此，我不能简单地插入宽度。理想情况下，我正在尝试支持IE6，但如果不行，那就算了。 - chacham15

6个回答

2

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

首先： "表格很邪恶" 是一个谬论。如果表格适合你，没有理由更改布局。

但是，不出奇迹，我无法使它起作用。有各种方法可以使用 divs 模拟表格，但这并不容易。也许那些说“不要使用表格”的人应该想出更简单、可靠的方法用CSS替换表格。CSS可以做很多事情，但在不使用JavaScript的情况下创建具有相同高度的几个元素非常困难。

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

以下是一个很好的文章： Multi-Column Layouts Climb Out of the Box

- Aaron Digulla

5

“Tables are evil”这个说法是错误的，而“仅将表格用于排版布局是有问题的”则是完全正确的。 - punkrockbuddyholly

1

自1998年以来，有一种简单的CSS可以可靠地使用div模拟表格。只是世界上最富有的软件公司直到2009年才开始实现它。 - robertc

@MrMisterMan：只有当你能够花费无数的时间来修复所有浏览器、所有显示尺寸和所有内容高度值的布局时，这才是真实的。 - Aaron Digulla

只是举个例子：使用“表格”，布局适用于任何大小。被接受的解决方案仅适用于固定大小的布局。 - Aaron Digulla

HTML的作用是描述数据。网站的内容不是表格数据，把整个网站放在一个表格中是没有意义的。有成千上万的网站采用非表格布局编码，它们运行得很好。可惜有些人认为这样做并不值得花费精力去做好。 - punkrockbuddyholly

@MrMisterMan：你想要的对于众多不同的浏览器来说并不重要。这些错误和限制并不在乎标准规定了什么。你可能会使用其他方法来伪造一个表格，但最终只是在浪费时间。这并不意味着我会将表格用于所有事情（这是不好的），但我也不会因为某种信仰而放弃一个有用的工具。 - Aaron Digulla

2

您可以使用display:table属性来实现此功能。

请查看以下示例：

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

或者，如果您有固定的高度，则可以按照以下方式编写：

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

- sandeep

为什么不是每个人都在使用这个，有什么陷阱吗？ - chacham15

0

请看这里或这里。
基本上，他们在中间的<div> 上使用边距，然后将侧边栏定位在边距中，并特别注意具有相同高度的外观。

这里是jsfiddle

- Baruch

0

假设所有的尺寸都是固定的，你可以这样做：

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

你需要将三个中间的div浮动，并使用另一个div来清除浮动。更多信息可以在这里找到。

编辑：好的，所以你需要一个流体布局。我发现最好的解决方案是以下示例：

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

从这篇文章中：

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

中间列不扩展到100％高度的问题很常见，我用来解决它的技术称为“伪列”。基本上，您可以使用背景图像或模拟中间列背景颜色的包装器div。上面的文章也涵盖了这两个方面。

更多关于伪列：

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

- lalibi

更新了问题以进一步解释。 - chacham15

0

使用浮动divs来处理中间的三个divs。

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

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

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

clear: both;

- Nathan Q

注意：只有当三列具有相同的背景时，此方法才有效。 - Aaron Digulla

@chacham15 你没有清除浮动。此外，您需要向两个侧面div添加一些内容，并为主要内容设置宽度 http://jsfiddle.net/DV3tn/2/ - punkrockbuddyholly

那就是问题所在，我不想为中心指定一个宽度。 - chacham15

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

参见：http://jsfiddle.net/thirtydot/kBHCR/

正如您所看到的，当调整.Window的width和height时，所有内容都会重新调整大小。

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

但在IE6中明显不起作用。如果您需要支持IE6，则可以仅为IE6使用JavaScript，或者坚持使用<table>。如果您想要支持IE6，则需要付出一定的代价。

CSS：

.Window {
    width: 600px;
    height: 500px; 
    background-color: rgb(0,0,0); 
    position: relative;
}
.Window-Top {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(128,128,128); 
    background-image: -webkit-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -moz-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -o-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -ms-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
}
.Window-Bottom {
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,128,128);
}
.Window-Content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
}
.Window-Content-Left {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255,0,0);
}
.Window-Content-Right {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0,0,255);
}
.Window-Content-Content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 150px;
    background-color: rgb(0,255,0);
}