Css背景/背景位置问题

Question

我对一些代码的“位置”有问题：

有没有人能帮我找到一个正确的解决方案，让图形在右边和左边显示，在中间显示“内容”，而不会出现“白色溢出”？

截图：http://i.stack.imgur.com/1qfeb.jpg

来源: file.html

<div id="toggler-1">
 <div class="box-2">
  <div class="left left-img">
  </div>
 <div class="left content">
  <p>simple text example ...</p>
 </div>
 <div class="right right-img">
 </div>
 <div class="clear">
 </div>
</div>
</div>

来自CSS的来源：

.content .main .box .box-2{height:100%;width:100%;background:#FFF}
.content .main .box .box-2 .left-img{background:url("../images/content-box-left-left.gif");background-repeat:repeat-y;width:14px;height:100%}
.content .main .box .box-2 .right-img{background:url("../images/content-box-right-right.gif");background-repeat:repeat-y;width:14px;height:100%}
.content .main .box .box-2 .content{text-align:left;color:#000000;vertical-align:top}

Answer 1

#wrapper {边距:0 auto；宽度: 922px；}

#leftcolumn { display: inline；color：#333；float: 10px；padding: 0px；width: 195px；float: left；}

#content {浮动:左；颜色：#333；边距: 10px 13px；填充: 0px；宽度: 460px；显示:内联；位置:相对；}

#right color{ display: inline；position: relative；color：#333；right: 10px 10px 10px 0px；padding: 0px；width: 195px；float: right；}

此css的HTML如下所示

    <div id="wrapper">

        <div id="leftcolumn">



        </div>
        <div id="content">

        </div>
        <div id="rightcolumn">



        </div>
    </div>

</body>

最佳实践是将您的所有子DIV包装到一个外部DIV中，就像本例中的包装器DIV一样。

Answer 2

您是否尝试过将背景颜色设置为透明，以确保容器不会继承其他规则的白色背景……

.content .main .box .box-2{
    height:100%;
    width:100%;
    background:#FFF;
}

.content .main .box .box-2 .left-img{
    background-color: transparent;
    background:url("../images/content-box-left-left.gif");
    background-repeat:repeat-y;
    width:14px;
    height:100%;
}

.content .main .box .box-2 .right-img{
    background-color: transparent;
    background:url("../images/content-box-right-right.gif");
    background-repeat:repeat-y;
    width:14px;
    height:100%;
}

.content .main .box .box-2 .content{
    text-align:left;
    color:#000000;
    vertical-align:top;
}

Answer 3

对于这里感兴趣的人，我有一个解决方案：

<div id="toggler-1">
 <div class="lo">
  <div class="ro"> 
   <div class="inhalt"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
   </div>
  </div>
 </div>
</div>

和css：

.content .main .box .ro {background:url(../images/content-box-right-right.gif) top right repeat-y;}
.content .main .box .lo {background:url(../images/content-box-left-left.gif) top left repeat-y;}
.content .main .box .inhalt {margin:0;padding:2.5em 2.5em 3.5em 2.5em;}
.content .main .box .inhalt p {margin:0;padding:0;}