0

次の css を div コンテナーの境界イメージを ger に設定しましたが、問題は、右のイメージが境界線に正しく表示されず、div コンテナーの右の境界線側からスペースが広がることです。

<div id="container">
<div id="left-image"></div>
<div id="main-containts">
    <div id="data-containts">
    data
    </div>
</div>
<div id="right-image"></div>



   <div id="bottom">

       <div id="bottom-left"></div>
       <div id="bottom-center"></div>
       <div id="bottom-right"></div>

   </div>


</div>



div#container{
    position:relative;
    margin-left:120px;
    margin-right:120px;
    float:top;
    padding-top:0;
    margin-bottom:50px;
    width:auto;
    height:100%;
}
div#left-image{
    position:absolute;
    left:0;
    width:28px;
    height:100%;
    float:left;
    background:url(border-left.png) repeat-y;   
    }

   div#right-image{
    position:absolute;
    right:0;
    float:right;
    width:30px;
    height:100%;
    margin-right:0;
    background:url(border-right.png) repeat-y;
    }   
    div#bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:36px;
    z-index:100;
   }
    div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}   
div#bottom-center{

height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}       
    div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;

}
4

1 に答える 1

0

css3 をサポートする最新のブラウザーのみをターゲットにしている場合。これは、css3の border-imageプロパティによって簡単に実現できます。あなたが気づいていない場合に備えて、プロパティを見てみる価値があります。

http://css-tricks.com/understanding-border-image/

上記のコードを機能させたい場合は、div 構造を貼り付けます。

于 2012-07-03T10:29:13.597 に答える