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-color私はあなたのすべての要件を知っているわけではありませんが、の.containerを左の列にしたいものに設定し、繰り返し画像を使用して右の列を埋めることができれば、よりうまく機能します. その理由は、背景の配置は右からではなく、左からのみ行うことができるためです。次のようなものです：

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

は左#ffffffの列の色を表し、bg.png右の列は. 左を png にする必要がある場合は、フローティング div の周りに 2 つ目のラッパーが必要になるでしょう。何かのようなもの：

<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 に答える