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是一个使用容器整个宽度的块元素。

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

1 个答案: