1

所以布局是这样的：

<div style="width: 100%;" class="container">

  <div class="col1" style="width:30%;float:left;">  
   column 1
  </div>

  <div class="col2" style="width:70%;float:left">  
   column 2
  </div>

</div>

我想制作div.col1一种不同的颜色，所以为此我在div.container. 问题是这个容器是流动的，我不知道如何定位图像。

我尝试过这样的事情，但是当您调整浏览器窗口大小时它不起作用：

.container{background: transparent url(images/bg.png) repeat-y -70% top;

有没有办法做到这一点？

4

1 回答 1

1

我不知道您的所有要求，但是如果您可以将background-colorof设置.container为您想要的左列，然后使用重复的图像填充右列，它会更好。原因是背景定位不能从右侧完成，只能从左侧完成。所以像：

.container{background: #ffffff url(images/bg.png) repeat-y 30% top}

其中#ffffff代表左列颜色，bg.png右列。如果您真的需要将左侧作为 png，那么您可能需要在浮动 div 周围使用第二个包装器。就像是：

<div style="width: 100%;" class="container">
<div class="inner">
   <div class="col1" style="width:30%;float:left;">  
     column 1
   </div>

   <div class="col2" style="width:70%;float:left">  
     column 2
   </div>
</div>
</div>

设置inner包装器（这可能只是纯色而不是重复的图像）：

.inner{background: url(images/bgright.png) repeat-y 30% top}

还有你的容器：

.container{background: url(images/bgleft.png) repeat-y left top}

30% 的“间隙”inner将允许左侧 30% 列的背景从container.

于 2010-07-12T20:47:01.143 回答