Question

也许已经有关于这个主题的问题，但我找不到它。

我的问题很简单，
我可以只在页面布局上使用div吗？

我遇到了麻烦，例如创建一个带角落的div。

A_____B______C  
|            |
D     E      F
|            |
G_____H______I

将所有字母作为具有一些背景的div，而字母E是放置内容的位置，它是动态的，因此它可以获得任何高度，而整个窗口的宽度将是100％（还有另一个div作为这个div左边的菜单，但我没有在这里考虑。）在表格中，我很快就完成了没有黑客攻击，但是对于div，我就是不能我无法使用div来正确扩展div D和F的高度，其余的都没问题

所以，
1. div可以真正替换表格进行布局吗？ 2.可以div替换没有css兼容性的表吗？

（顺便说一下，这不是我唯一的问题，div和css的布局，表格很容易做到）

Answer 1

您的示例在基本CSS中完全可行，使用相对定位元素内的绝对定位。看看这个：

http://www.ulmanen.fi/stuff/box.php

因此，在回答您的问题时，div实际上会替换表格进行布局。

第二个问题是什么呢？在需要表格的地方应该使用表格：表格数据。如果您需要在表格中展示某些内容，请使用表格。只是不要将它们用于布局。

Answer 2

是
可悲的是，没有。您的示例几乎肯定需要一些“黑客”才能在所有浏览器中运行。使用纯CSS实现布局表很容易做的事情非常非常复杂。

对于您的示例，以下问题应为您提供一些指导。

Answer 3

并没有真正回答你的问题，但雅虎有一些很好的网格CSS工具，真正有助于做基于div的布局。这些可能有用作参考。

http://developer.yahoo.com/yui/grids/

Answer 4

是的，你可以。
- The 'Holy Grail' 3 column Liquid Layout
- In Search of the Holy Grail—A List Apart
- 或者，对于未来（因为IE 6或7不支持），you can just use display: table to get <div> elements to lay out exactly like a table

Answer 5

div可以真正替换表格进行布局吗？

一般来说，值得瞄准。但对于一切？没有。有一些常见的表格结构无法用CSS复制，特别是在一个表格中混合使用固定像素，字体相对和视口相对测量的情况。复杂的液体形式布局是通常的情况。

理论上，您可以使用样式为<table>等的div替换<tr>，<td>和display: table-cell。但是这在IE中不起作用，并且有用的问题：你仍然将布局问题泄漏到标记中，就像它是一个表一样。（另外你不能做这样的跨栏/行。）

我遇到了麻烦，例如创建一个角落的div。

你的意思是图像角落？这真的很容易。但诀窍不是试图通过定位元素来做到这一点。相反，使用嵌套的div，每个div都有自己的背景。例如：

<div id="foo"><div class="left"><div class="right">
    Content.
</div></div></div>

#foo { background: url(mainbackground.gif); }
#foo .left { background: url(leftborder.gif) top left repeat-y; }
#foo .right { background: url(rightborder.gif) top right repeat-y; padding: 32px; }

这样可以在主背景上放置左右边框图像。您可以执行相同的三次以获得完整的表格，其中包含8个边框图像，或者只是嵌套九个深度的div。如果可以将主背景图像包含在其中一个边框图像中，则可以将所需的div数量从3减少到2（如果元素可能变大，则可能需要非常宽的图像）。如果您需要边框图像是透明的（即主要背景图像不在边缘上渲染），您可以在某些元素上使用填充。

将来，这将变得更加容易，并且不需要这么多嵌套标记，这要归功于CSS3提出的每个元素multiple backgrounds和border images。

Answer 6

您应该像使用表一样使用div创建行。

将abc放入div |我们称之为div 1
把def放在div中我们称之为div 2
把ghi放在div中我们称之为div 3

让 e 确定div 2 的高度，让 2 确定 d 的高度和<强>˚F即可。使用正确的位置，例如position：relative，以及display：table-cell，你应该能够管理。

不打算创建整个解决方案。

div可以真正覆盖布局上的所有内容吗？

6 个答案: