css - 图像下方的空白 - 显示 :block not working

标签 css css-float

我的标题有一个图像,我试图在图像上放置一个文本 block ,以使图像的一部分“可点击”。但是,当我这样做时,标题下方和正文上方会出现一个空白。

有谁知道我该如何纠正这个问题?图片:/image/dIC9F.jpg

CSS

    .meio {
        background: url("http://www.oneideaperday.com/meio5.png");
        background-repeat: repeat-y;
        background-position:50% 0%;
        text-indent: 250px;
           }

    .img {
      margin: 0;
      padding: 0;
      display: block;
      vertical-align:bottom;
      position:relative; top:5px;
      text-align: center;
          }

     .image {
             position:relative;
             float:center;
         text-align: center
             }

     .image .text {
               opacity: 0;
                   position:absolute;
                   top:55px; 
                   left:505px;
                   width:300px; 
                   }

     .img .termos {
                   position:absolute;
                   top:55px; 
                   left:835px;
                   width:300px;
               -webkit-transform: rotate(45deg); 
               -moz-transform: rotate(45deg);
               font-size: 10px;
               opacity: 0;
                   }

HTML

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
<body>
    <div class="img">
    <img src="http://www.oneideaperday.com/header1.png" alt=""/>
        <div class ="termos">
            <p>Termos de Uso</p>
    </div>  

    <div class="meio">
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
        a</br>
    </div>


    <div class="image">
      <img alt="" src="http://www.oneideaperday.com/footer.png" />
      <div class="text">
        <p><a href="http://www.acumula.com.br">Acumula.com.br</a></p>
      </div>
    </div>

</body>
</head>
</html>

最佳答案

您的标记中似乎有很多错误...我会在尝试解决问题之前先修复这些错误 - 因为它可能会自动消失:

首先,确保所有打开和关闭元素相互关联(正如您从下图中看到的,您没有足够的 </div> 使用... body 、头部和html 都在提示标签不匹配)。您需要添加 </head>整理你的缩进将帮助你追踪未闭合的标签。

其次</br>不是标签,您应该使用 <br />

Screenshot showing incorrect markup

如果您尝试下面的标记会发生什么?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="img">
      <img src="http://www.oneideaperday.com/header1.png" alt="" />
      <div class="termos">
        <p>Termos de Uso</p>
      </div>  
      <div class="meio">
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
      </div>
      <div class="image">
        <img alt="" src="http://www.oneideaperday.com/footer.png" />
        <div class="text">
          <p><a href="http://www.acumula.com.br">Acumula.com.br</a></p>
        </div>
      </div>
    </div>
  </body>
</html>

关于css - 图像下方的空白 - 显示 :block not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12448564/

相关文章:

css - css 元素的错误放置 (wordpress)

css - Div 对齐 FireFox, IE7, IE6

html - 如何在 float 上堆叠 div?

css - float 元素 : two ways of doing it, 哪个更正确?

html - float : left breaks container div?

javascript - 图像映射;悬停在特定区域时显示文本

javascript - 根据输入的输入字段数量显示正确的输入字段数量

css - IE7 不懂 float 宽度?

css - 如何将 float 的 child 扩展到 parent 的高度?

html - 屏幕上奇怪的东西展示