让div的行为像一张桌子

所以我真的试图独占使用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>

现在，这是什么做的它：

alt text http://img97.imageshack.us/img97/4281/screenshot20100215at935.png

注意，它的过去的页面高度略去。

这就是我想做的事情：

alt text http://img714.imageshack.us/img714/8504/screenshot20100215at936.png

我希望它流体“适合”的文字没有我指定的高度。似乎问题在于两侧的div除非将高度指定为100％，否则无法工作。有没有其他的/更简单的方法来做到这一点？

谢谢！

来源

2010-02-15 Constant Meiring

为什么你要divs行为像一张桌子？这不是什么表？使用表格所需的行为是表格的缺点是什么？ – Rich 2010-02-15 20:13:54

您可以制作草图来展示它应该是什么样子？很难想象。 – 2010-02-15 20:14:25

@我问自己同样的问题，但这看起来像合法*布局*，而不是表格数据。我已经建议使用一张桌子，清理霰弹枪并准备进行火焰战争:) – 2010-02-15 20:15:00

你问了一下，所以在这里。这是我手工制作的，跨浏览器，符合标准的在柔性容器上进行图像边界的方法。

我假设这里的图像边框大小为16px，您需要调整它以适应此情况。另外，为了清晰起见，我添加了边框。这显然应该删除。

Demo。

<!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>

来源

2010-02-16 09:10:48 graphicdivine

谢谢！这就是我一直在寻找的！解决问题的另一种方法。 – 2010-02-16 09:13:04

很高兴。真的，离你原来的代码不远一百万英里。 – graphicdivine 2010-02-16 09:22:28

如果数据是表格式（意味着它在语义上属于正确的行和列，而不是在视觉上），则应该使用表格。

如果只是你喜欢的布局，有一个CSS规则，可能会帮助，但不是所有的浏览器：

div.column { 
    display: table-column; 
} 

div.cell { 
    display: table-cell; 
}

这是假设您将所有的“列”中的div类的column和你的“细胞”分类cell。

的显示选项表样行为的完整列表：

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

来源

2010-02-15 20:25:37 Anthony

这似乎是一个非常冒险的事情。总体思路是将div用于布局，并将表格用于表格数据。以上是纯布局，而不是表格数据，因此我想使用div。我知道如何使用表来实现这一点，但我想学习如何使用div来以更正确的方式完成此操作。 – 2010-02-15 20:31:25

如何使用CSS规则hacky？特别是当它明确地设计提供表格布局（你想要的），而不实际使用表格（你的确切目标）？你将不得不在某个地方作出妥协，因为没有正确的方法可以在每个浏览器和每个屏幕尺寸上运行。我想我会为你提供专门为你的需求设计的w3c。使用浮动的方法是很花哨的，因为浮动的目的是让文本环绕图像，而不是做内联块。顺便说一句，这又是一个你可能要考虑的“黑客”解决方案。 – Anthony 2010-02-15 20:46:39

我是在div的任何一天使用表格，如果只是为了讨论表格本身就是邪恶的普遍（错误的）陈词滥调。但是在这种情况下，我发现希望在没有表格的情况下工作，并且在没有'table-*'属性的情况下达到所需的效果，完全有效。此外，“表行”和配偶（正如Anthony自己指出的那样）会给IE家庭带来麻烦。 – 2010-02-15 20:46:50

如果宽度将是固定的，为什么不使用一个背景图片为三个“行”的：

<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>

该div自然会堆叠并扩展到容器的全部宽度。

来源

2010-02-15 21:20:05 chprpipr

aaah谢谢。这是我正在寻找的答案类型。这只是解决问题的一种方式。所有其他人都是完全正确的，但他们认为技术太好了！谢谢！ – 2010-02-16 09:01:34

让div的行为像一张桌子

回答

相关问题