html - border on side 继续一路往下动态页面？

Question

有一个边框，bgr_left.jpg，我想在我的页面上继续沿着 y 轴向下...

bgr_left.jpg 是 30px x 30px，我把它放在一个 div 标签中...我还想在右侧和顶部一直使用相同的边框...

我做不到，这是我的左边框 CSS:

.bgr_left {
    background-image: url(../Graphics/bgr_left.jpg);
    background-repeat: repeat-y;
    background-position: left;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 30px;
    background-color: #E7F5F0;
}

感谢大家的帮助

Answer 1

您可以使用表格或动态调整 div 的大小来做到这一点。

表格法

虽然这样的事情在网络浏览器中应该没问题，但搜索引擎和其他计算机消费者可能会误解它，因为您使用表格标记来标记非表格内容。

<table>
  <tr>
    <td colspan="3" class="bgr_top"/>
  </tr>
  <tr>
    <td class="bgr_left" />
    <td>Content content content</td>
    <td class="bgr_bottom" />
  </tr>
  <tr>
    <td colspan="3" class="bgr_bottom"/>
  </tr>
</table>

动态div

在 jQuery 的帮助下，我们可以生成语义正确的 HTML，还可以在网络浏览器中创建所需的呈现。未经测试的样本:

<p class="bgr">Content content content</p>

<script type="text/javascript">
  $('.bgr').each(function(i,el){
    $('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
    // similar for top, right, and bottom
  });
</script>