我想在页面中间有一条 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;
}