Question

我遇到了使用DIV为我的网站设置内容框样式的问题。它基本上是这样的：

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

r1，r2，r3和r4的宽度/高度未知。它们都有1px（高或宽）渐变，在背景中重复出现。

角落有5x5px pngs（圆形，透明背景）。

问题是我不知道内容的宽度或高度，因此不知道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>

Answer 2

不，这可以通过标准CSS实现。如果您没有设置宽度或高度，它们将自然形成。高度由内容的长度决定，宽度（如果没有指定）将填充它所在容器的宽度。如果容器的宽度是整个页面，那么它将占用整个页面。

似乎要实现您正在寻找的东西，您可以做类似的事情：

<div class="container">
  <div class="outer-wrap">
    <div class="inner-wrap">
      <div class="content">
        <p>Content here</p>
      </div>
    </div>
  </div>
</div>

虽然我一般不宽恕使用像这样的非语义代码膨胀，但它肯定会完成工作。您可以将角设置为CSS中各种div的背景图像。

Answer 3

我快速制作的CSS解决方案：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS borders</title>
<style>


* {
margin:0;
padding:0;
}

#container
{
    width:20%;
}

#head
{
    background-image:url(images/rounded_01.png);
    background-position:left top;
    background-repeat:no-repeat;
    height:14px;
    width:14px;
    width:100%;
}

#head-mid
{
    background-image:url(images/rounded_02.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#head-right
{
    background-image:url(images/rounded_03.png);
    background-position:right top;
    background-repeat:no-repeat;
    height:14px;
    width:100%;
}

#content
{
    background-image:url(images/contentleft.png);
    background-position:left top;
    background-repeat:repeat-y;
    height:14px;
    width:14px;
    width:100%;
}

#content-mid
{
    background-image:url(images/content.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#content-right
{
    background-image:url(images/contentright.png);
    background-position:right top;
    background-repeat:repeat-y;
    width:100%;
}

#bottom
{
    background-image:url(images/rounded_07.png);
    background-position:left top;
    background-repeat:no-repeat;
    height:14px;
    width:14px;
    width:100%;
}

#bottom-mid
{
    background-image:url(images/rounded_08.png);
    height:14px;
    margin-left:14px;
    margin-right:14px;
}

#bottom-right
{
    background-image:url(images/rounded_09.png);
    background-position:right top;
    background-repeat:no-repeat;
    height:14px;
    width:100%;
}
</style>
</head>
<body>
    <div id="container">
        <div id="head">
                <div id="head-right">
                    <div id="head-mid">
                    </div>
                </div>
        </div>
        <div id="content">
                <div id="content-right">
                    <div id="content-mid">
                    <p>content here... will auto expand and resize</p>
                    </div>
                </div>
        </div>
        <div id="bottom">
                <div id="bottom-right">
                    <div id="bottom-mid">
                    </div>
                </div>
        </div>

    </div>
</body>
</html>

所有文件（图片和psd）：http://www.mediafire.com/file/zmemlw0tyyv/css.rar

Answer 4

r4固定（5px），含量液体，r2固定（固定）

查看此工具是否有帮助。

http://www.pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm

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

4 个答案: