无表格或不用无表格:带自定义角落的Html扩展框

Question

我在使用DIV为我的网站设置内容框样式时遇到了问题.它基本上看起来像这样:

          container
+--------------------------+
|+--+------------------+--+|
||c1|        r1        |c2||
|+--+------------------+--+|
||  |                  |  ||
||  |                  |  ||
||r4|     content      |r2||
||  |                  |  ||
||  |                  |  ||
|+--+------------------+--+|
||c4|        r3        |c3||
|+--+------------------+--+|
+--------------------------+

r1,r2,r3和r4的宽度/高度未知.它们都具有1px(高或宽)梯度,在背景上重复.

角落有5x5px png(圆形,透明背景).

问题是我不知道内容的宽度或高度,因此不知道r1到r4的宽度或高度.在css中没有真正的说法:

r1 {width: container.width - 2x5px};

我知道这可以用javascript完成,但我想避免这种情况.

在这种情况下使用表格不是更容易吗？它对我来说看起来像一张桌子:)

Answer 1

对我来说看起来像一张桌子.我相信我会被称为异教徒,但有时使用表比css更容易.

    <table>
        <tr>
            <td id=container>
             <table>
                <tr>
                  <td id=c1></td>
                  <td id=r1></td>
                  <td id=c2></td>
                </tr>
                <tr>
                  <td id=r4></td>
                  <td id=content></td>
                  <td id=r2></td>
                </tr>
                <tr>
                  <td id=c4></td>
                  <td id=r3></td>
                  <td id=c3></td>
                </tr>
            </table>
            </td>
        </tr>
    </table>