Question

我希望在页面中间部分有一个1或2像素的小行，以便从内容中分离导航文本。我希望线条在线条的顶部和底部淡化为背景颜色（好吧，只是淡入淡出），但我希望线条的中间，纯黑色部分，以内容div的大小展开右。

阅读是否令人困惑，我需要详细说明吗？

编辑：我现在用桌子完成了所有事情，我认为这样会更容易。现在我的问题是让该行的中间部分与另一个名为“content”的表格单元一起扩展。除了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;
}

Answer 1

我认为空表格单元格应至少包含一些内容，即使它只是 

图像与扩大中间

1 个答案: