布局问题 - 页脚与图片冲突

时间:2018-03-08 22:41:47

标签: html css

enter image description here

我原本以为这个问题与bootstrap相关,因为在我的前端离开之前他说他使用了自举但是漂浮似乎没有修复它或者我刚丢失。事实证明它

这是css

     .container {
    position: relative;
    max-width: 1200px;
  }
  .content-overlap {
    background: rgb(245, 244, 239);
    width: 40%;
    position: absolute;
    top: 80px;
    padding: 60px;
  }

  .content-overlap-right {
    background: rgb(245, 244, 239);
    width: 40%;
    position: absolute;
    bottom: 80px;
    right : 0px;
    padding: 60px;

  }
  .content-overlap:before {
    content: "";
    border: 2px solid rgba(171, 154, 124, 1.0);
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }

  .content-overlap-right:before {
    content: "";
    border: 2px solid rgba(171, 154, 124, 1.0);
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;

  }
  .image-overlap {
    width: 70%;
    float: right;
  }

  .image-overlap-left {
    width: 70%;
    float: left;
  }
  @media screen and (max-width: 480px) {
    .content-overlap {
      position: relative;
      width: 100%;
    }
    .image-overlap {
      width: 100%;
    }

    .content-overlap-right {
      position: relative;
      width: 100%;
    }
    .image-overlap-right {
      width: 100%;
    }
  }

.footie {
    background: black;
    color: wheat;
    bottom: 0%;
    width: 100%;
}

这是html

    `<div class="container">
  <div class="content-overlap">
    <h2>Contact Us</h2>
      <p> For investment information call: <br>
        +number or +NUMBER <br> <br>
          For legal contact:+NUMBER <br>
          For partnership: +NUMBER <br>
                  </p>
  </div>
  <div class="image-overlap">
    <img src="assets\administration.jpg"  >
  </div>
</div>

`

我认为它可能与定位有关,但我不知道如何让它看起来一样。

我想要的只是页脚不要与联系我们文本框冲突。

现在它要求我添加细节,但我没有更多要添加。我实际上昨天问了这个问题,但由于给出了错误的背景,我给出了错误的背景信息)

页脚应该在底部渲染为部分,而不是碰撞。

1 个答案:

答案 0 :(得分:0)

它表明我的页脚处于布局中 - 没有简单的方法来设置样式表来单独影响它(因为任何样式表都会影响它看起来的所有布局)所以我最终设置了底部边缘的样式因此,前面的元素将整个事情推下去。

谢谢大家的帮助。