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

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

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

#wrapper指定 { 保证金：0自动; 宽度：922px; }

#leftcolumn { 显示：内联; 颜色：＃333; 保证金：10px; 填充：0px; 宽度：195px; 向左飘浮; }

＃内容 { 向左飘浮; 颜色：＃333; 保证金：10px 13px; 填充：0px; 宽度：460px; 显示：内联; 位置：相对; }

#rightcolumn { 显示：内联; 位置：相对; 颜色：＃333; 保证金：10px 10px 10px 0px; 填充：0px; 宽度：195px; 漂浮：对; }

这个css的HTML就像

    <div id="wrapper">

        <div id="leftcolumn">



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

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



        </div>
    </div>

</body>

在这种情况下，最好将所有子DIV包装到一个外部DIV中，如包装器DIV。

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

Css背景/背景位置问题

3 个答案: