边框一边继续向下动态页面?

时间:2009-10-17 22:33:42

标签: html css

有一个边框,bgr_left.jpg,我想继续沿着我页面的y轴...

bgr_left.jpg是30px乘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;
}

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

您可以使用表格或动态调整div的大小来执行此操作。

表格方法

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

<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,但也可以在Web浏览器中创建所需的渲染。未经测试的样本:

<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>