边框图像上的CSS帮助答案

【问题标题】：help with css on border image边框图像上的CSS帮助
【发布时间】：2011-01-15 14:33:55
【问题描述】：

我正在尝试用图像创建边框，我几乎在那里，但左右 div 不太正确。左边的在 TL 下面，这很糟糕，而右边的由于某种原因漂浮在它下面，使底部的东西全部移位。如果我知道一个可以放样本的好网站，我可以附上一个例子（不想泄露我的网址）

html

<div id="text">
 <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
 <div class="left"></div><div class="content"></div><div class="right"></div>
 <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

css

  .tl {  

      background: url(corner1.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .tm {  
      width: 352px;  
      height: 59px;  
      background: url(top.png) repeat-x;
      float: left;  
      }  

  .tr {  

      background: url(corner2.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .content {  
      padding: 0 5px;  
      width: 360px;  
     float: left 
      }  

  .bl {    
      background: url(corner4.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .bm {  
      width: 352px;  
      height: 58px;   
      background: url(bottom.png) repeat-x;
      float: left;  
      }  

  .br {  
      background: url(corner3.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

 .left {background: url(left.png) repeat-y; width: 58px; height: 100%}
 .right {background: url(right.png) repeat-y; width: 58px; float: left; height: 100%}

【问题讨论】：

标签： html css image border

【解决方案1】：

我看起来并不难，但我注意到一些事情应该可以帮助您更接近解决方案：

你.left没有float属性，我想它应该float:left。

你应该在 tr 中做的另一件事，你应该明确：对，所以你需要保证下一个 div 在它下面。

你也应该对 .right div 做同样的事情。

查看 clear css 属性。

另外，让你的身高保持一致。 tl、tm 和 tr 具有不同的高度。出于故障排除的目的，您应该使它们都相同。

【讨论】：

谢谢，我弄乱了清除权并放入 jquery 以确保其模式正确。

【解决方案2】：

我建议避免浮动，而是使用绝对定位。所以像......

#text{position:relative;padding:60px}
.tl,.tm,.tr,.bl,.bm,.br,.left,.right{position:absolute}
.tl{top:0;left:0}

...等等直到...

.br(right:0;bottom:0}

【讨论】：

【解决方案3】：

我看不出有什么不同。

<div id="text">
    <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
    <div class="left"></div><div class="content"></div><div class="right"></div>
    <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

对

<table cellpadding="0" cellspacing="0">
    <tr><td class="tl"></td><td class="tm"></td><td class="tr"></td></tr>
    <tr><td class="left"></td><td class="content"></td><td class="right"></td></tr>
    <tr><td class="bl"></td><td class="bm"></td><td class="br"></td></tr>
</table>

如果您要滥用标签，请使用有效的标签。

你也可以使用...

<style type="text/css">
.tl {background:url('tl.GIF') no-repeat left top;}
.tr {background:url('tr.GIF') no-repeat right top;}
.bl {background:url('bl.GIF') no-repeat left bottom;}
.br {background:url('br.GIF') no-repeat right bottom;}
.t {background:url('t.GIF') repeat-x left top;}
.b {background:url('b.GIF') repeat-x left bottom;}
.l {background:url('l.GIF') repeat-y left top;}
.r {background:url('r.GIF') repeat-y right top;}
</style>

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="br">
   content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

你不需要这么冗长。仅使用带有大图像的 .lt 和 .br DIV 就取得了不错的效果。

【讨论】：