Html 获取div'；让我们表现得像一张桌子

所以我真的尝试只使用div，而不是为了布局而使用表，但我仍然在这里和那里卡住了。今天我有一个这样的案例

考虑以下标记：

<div style="width:943px;margin:0px auto;height:auto">
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div>
    </div>
    <div style="height:auto;display:block;clear:both">
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div>
        <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;">
            <br />
            Some text heeere.
            <br />
            Some more text heeere.
        </div>
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div>
    </div>
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div>
    </div>
</div>

有一些文字。


还有一些文字。

现在这就是它所做的：

请注意，它稍微超过了页面高度

这就是我想要它做的：

我希望它流畅地“适合”文本，而不需要指定高度。问题似乎出在两个侧边div上，除非您将高度指定为100%，否则这两个侧边div将不起作用。有没有其他/更简单的方法

谢谢

如果数据是表格式的（这意味着它在语义上属于适当的行和列，而不仅仅是在视觉上），那么应该使用表

如果它只是您喜欢的布局，那么css规则可能会有所帮助，但并非适用于所有浏览器：

div.column {
   display: table-column;
}

div.cell {
  display: table-cell;
}

这假设您将所有“列”div分配为

列

类，将“单元格”div分配为

单元格

类

表式行为的完整显示选项列表如下：

table   
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

---

如果要固定宽度，为什么不为三个“行”中的每一行使用单个背景图像：

.container{宽度：943px；}
.header{background:url（header.png）无重复；}
.body{background:url（body.png）repeat-y；}
.footer{背景：url（footer.png）重复无；}
 ：


有一些文字。


还有一些文字。

---

div将自然地堆叠并扩展到容器的整个宽度。

您已经要求了，现在开始。这是我手工制作、跨浏览器、符合标准的方法，用于在灵活的容器上制作图像边框

我假设这里的图像边框大小为16px，您需要调整它以适应。另外，为了在没有图像的情况下保持清晰，我添加了边框。显然，这些应该被移除

边界
.外部{
位置：相对位置；
浮动：左；
边框：1px纯蓝
}
.内部{
边框：1px纯绿
}
.tl、.tm、.tr、.ml、.mr、.bl、.bm、.br{
边框：1px纯红；
保证金：0；
填充：0；
}
.tm、.bm、.tl、.tr、.bl、.br{
高度：16像素
}
.tl、.tr、.bl、.br{
宽度：16px
}
.tm、.bm{
高度：16px；
边际：0像素
}
.tm{
背景重复：重复-x；
利润率：0.16px
}
.bm{
背景重复：重复-x；
利润率：0.16px
}
.tl{
位置：绝对位置；
排名：0；
左：0；
}
.tr{
位置：绝对位置；
排名：0；
右：0；
}
.bl{
位置：绝对位置；
左：0；
}
.br{
位置：绝对位置；
右：0；
}
.ml{
左侧填充：16px；
背景重复：重复-y
}
先生{
右边填充：16px；
背景重复：重复-y；
背景位置：100%0
}
洛勒姆
同侧阴沟

为什么希望div像表一样工作？那不是桌子的用途吗？如果你需要的是一张桌子的行为，那么使用桌子的缺点是什么？你能画一个草图来展示它应该是什么样子吗？很难想象。@Rich我问自己同样的问题，但这看起来像是合法的布局，而不是表格数据。我已经打算建议使用一张桌子，清洁猎枪，准备火焰战：）我们真正需要的是一个标签集，它的行为与、、等完全相同，但没有命名。好像什么的。这样，我们就可以拥有自己的功能，而不会在使用时受到嘲笑和否决。哦，也许HTML6…@pekka:）它可以在表中工作，但我想使用divs，因为这显然是正确的方法。另外，我还附上了截图，所以和截图一起想象应该不会太困难。另外，我用标题“让divs表现得像一张桌子一样？”，更多的是用来描述我试图实现的目标。这似乎是一种非常老练的方式。总体思路是使用div进行布局，使用表格进行表格数据。上面是纯布局，而不是表格数据，因此我想使用div。我知道如何使用table来实现这一点，但我想学习如何使用div以更正确的方式实现这一点。如何使用CSS规则？特别是当它明确设计为提供表布局（您想要的）而不实际使用表（您的确切目标）时？？？你将不得不在某个地方做出妥协，因为没有正确的方法可以在每个浏览器和每个屏幕大小上工作。我想我会为你提供一个w3c专门为你设计的。使用浮点数是很有技巧的，因为浮点数是用于在图像周围进行文本环绕，而不是用于内联块。顺便说一下，这是另一个你可能要考虑的“杂乱无章”的解决方案。我想在任何一天使用DIV的表格，只是为了让表本身是邪恶的陈词滥调。但在这种情况下，我发现不使用表，也不使用

table-*

properties实现所需效果的愿望是完全有效的。此外，

表行

和配偶（正如安东尼自己指出的）会给IE家族带来麻烦。@Pekka，我们当时是一致的。当我看到人们在关于如何设计表格的合法问题上发表“不要使用表格”之类的帖子时，我真的很生气。表格并不是邪恶的，它们只是有一段肮脏的过去。我实际上无法理解OP在这里要求什么，但它肯定不会跳出来攻击我作为一个数据表，因此我认为这是一个很好的答案。奇怪的是，问题中的标记在语义上有一点是错误的，那就是
的使用。我赢了

<style type="text/css">
.container    {width:943px;}
.header       {background:url(header.png) no-repeat;}
.body         {background:url(body.png) repeat-y;}
.footer       {background:url(footer.png) repeat-none;}
</style>

<div class="container">
    <div class="header">&nbsp:</div>
    <div class="body">
        <br />
        Some text heeere.
        <br />
        Some more text heeere.
    </div>
    <div class="footer">&nbsp;</div>
</div>

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Borders</title>
<style>
.outer {
    position:relative;
    float: left;
    border: 1px solid blue
}
.inner {
    border: 1px solid green
}
.tl, .tm, .tr, .ml, .mr, .bl, .bm, .br {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}
.tm, .bm, .tl, .tr, .bl, .br {
    height: 16px
}
.tl, .tr, .bl, .br {
    width: 16px
}
.tm, .bm {
    height: 16px;
    margin: 0 0px
}
.tm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.bm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.tl {
    position: absolute;
    top: 0;
    left: 0;
}
.tr {
    position: absolute;
    top: 0;
    right: 0;
}
.bl {
    position: absolute;
    left: 0;
}
.br {
    position: absolute;
    right: 0;
}
.ml {
    padding-left: 16px;
    background-repeat:repeat-y
}
.mr {
    padding-right: 16px;
    background-repeat:repeat-y;
    background-position: 100% 0
}
</style>
</head>
<body>
<div class="outer">
    <div class="tm">
        <div class="tl"></div>
        <div class="tr"></div>
    </div>
    <div class="ml">
        <div class="mr">
            <div class="inner">
                <h2>Lorem</h2>
                <p>Ipsum dolor</p>
            </div>
        </div>
    </div>
    <div class="bm" >
        <div class="bl"></div>
        <div class="br"></div>
    </div>
</div>
</body>
</html>