0

2つのcssクラスがあります。1つはページの左側にテキストの画像を保持し、もう1つはページの右側にフォームを保持することになっています。どういうわけか、ページの左側のテキスト画像を下げようとしてパディングを増やすと、右側のフォームも下がっています。両方のクラスのパディングを個別に調整できるように、どうすれば修正できますか。これがcssです：

.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;} 
.slider .textholder {padding-top: 100px;}

そして、これがhtmlにどのように表示されるかです。

<div class="header">
   <div class="headertop"> 
       <div class="header_text"><a href="#">Email</a> | <a href="#">Client Login</a> </div>
   </div>
   <div class="block_header">
       <div class="logo"><a href="index.html"><img src="logo.png" width="242" height="94" border="0" alt="logo" /></a>
       </div>
       <div class="slider">
          <div class="gallery">
             <div class="textholder"> <img src="images/textimg.png"></div>
             <div class="formbox">Form is here </div>
          </div>
      </div>
   </div>
</div>

ありがとう。ウェブサイトはavidest.com/schneerにあります。

4

1 に答える 1

2

float：leftをテキストホルダーに追加します。

.slider .textholder {float:left;padding-top: 100px;}

また、検査ツールを使用して実際に何が起こっているかを確認することをお勧めします。この場合、テキストホルダーはコンテナの全幅を使用するブロック要素であることに気付くでしょう。

于 2013-02-26T20:19:32.487 に答える