0

我想在页面中间有一条 1 或 2 像素的小线,以将导航文本与内容分开。我希望线条在线条的顶部和底部淡化为背景颜色(好吧,只是淡出透明),但我希望线条的中间,纯黑色部分随着内容 div 的大小而扩展正确的。

读起来会很混乱吗,我需要详细说明吗?

编辑:我现在已经用一张桌子做了所有事情,我认为这会更容易。现在我的问题是让行的中间部分与另一个名为“内容”的表格单元格展开。除了 sep_mid 单元格外,一切正常,因为我不想为单元格设置固定高度,我希望它根据“内容”单元格调整大小。

这是我的代码:

HTML:

<body>
    <div id="wrapper">
        <table align="center">
            <tr>
                <td class="nav" rowspan="3"><p>test</p></td>
                <td class="sep_top" rowspan="1"></td>
                <td class="content" rowspan="3"><p>Content here!</p></td>
            </tr>
            <tr> <td class="sep_mid" rowspan="1"></td> </tr>
            <tr> <td class="sep_bot" rowspan="1"></td> </tr>
        </table>
    </div>
</body>

CSS:

body {
    background-color: #bbc2c7;
    background-image: url('/images/bg.png');
    background-repeat: repeat-x;
}

body p {
    font-family: Delicious;
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious.ttf');
}

@font-face {
    font-family: "Delicious";
    src: url('/fonts/delicious_bold.ttf');
    font-weight: bold;
}

#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#wrapper p {
    font-weight: bold;
    font-size: 16px;
    font-family: Delicious;
}

.nav {
    text-align: right;
    padding-right: 20px;
}

.sep_top {
    background-image: url('/images/sep_top.png');
    background-repeat: no-repeat;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.sep_mid {
    background-color: #000;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 1px;
}

.sep_bot {
    background-image: url('/images/sep_bot.png');
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    width: 1px;
    height: 15px;
}

.content {
    padding-left: 20px;
}

table {
    border-collapse: collapse;
}

table td {
    border-collapse: collapse;
}
4

1 回答 1

0

我认为空表格单元格应该至少包含一些内容,即使它只是&nbsp;

于 2012-05-02T18:43:59.313 回答