css - 如何更改 css，以便降低一个类不会降低另一个？

Question

我有两个 CSS 类。一个应该在页面左侧保存文本图像，另一个应该在页面右侧保存表格。出于某种原因，当我增加填充以尝试降低页面左侧的文本图像时，右侧的表格也会下降。我该如何修复它，以便我可以独立调整两个类的填充。这是 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。

Answer 1

添加一个 float:left 到 textholder。

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

我还建议使用检查工具来查看实际发生的情况。在这种情况下，您会注意到 textholder 是一个使用容器整个宽度的 block 元素。