Question

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

我想让它在不指定高度的情况下流畅地“适应”文本。似乎问题在于除非您将高度指定为100％，否则两个侧面div将无法工作。是否有其他/更简单的方法可以做到这一点？

谢谢！

Answer 1

如果数据是表格式的（意味着它在语义上落入适当的行和列，而不仅仅是在视觉上），您应该使用表格。

如果它只是您喜欢的布局，那么有一条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

Answer 2

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

<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会自然地堆叠并扩展到容器的整个宽度。

Answer 3

你要求它，所以这里。这是我手工制作的，跨浏览器，符合标准的灵活容器上的图像边框方法。

我假设这里的图像边框大小为16像素，你需要调整它以适应。另外，为了清楚地显示图像的缺失，我添加了边框。显然，这应该被删除。

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>

让div表现得像一张桌子

3 个答案: