Question

我正在开发我的第一个网站及其基本代码，但是 div“beyza”，在网站上（图片上），我的页脚中的文字“Beyza设计的网站”，不断显示额外的空间，我该如何解决这个问题？ here is how it looks

非常感谢提前！

footer {
  width: 100%;
  position: relative;
  background-color: rgb(0, 255, 0);
  overflow: hidden;
}
.container {
  width: %100;
  position: relative;
  background-color: rgb(0, 255, 0);
}
.instagram {
  padding-top: 30px;
  display: inline-block;
}
footer small {
  display: block;
  margin: 20px;
  font-size: 21px;
  color: #FFF;
  text-align: center;
  background-color: rgb(0, 255, 0);
}
.sponsor {
  float: left;
  padding-left: 15px;
  margin-bottom: 15px;
  display: block;
}
.beyza {
  font-size: 14px;
  color: #FFF;
  float: right;
  margin-right: 15px;
}

<footer>
  <div class="container">
    <div class="instagram">
      <a href="https://www.instagram.com/alix.bizet/">
        <img src="images/instagram.png" alt="instagram">
      </a>
    </div>
    <small>&copy; 2016 Hair by Hood Project </small>

    <div class="sponsor">
      <a href="http://designmuseum.org">
        <img src="images/DesMus2.png" alt="designmuseum">
      </a>
    </div>
    <div class="beyza">Site designed by Beyza @<a href="https://graphicdialogue.co">GRAPHIC DIALOGUE</a>
    </div>
  </div>
</footer>

Answer 1

从.sponsor类

中删除margin-bottom

.sponsor {
 float: left;
 padding-left: 15px;
 ->margin-bottom: 15px;
 display: block;

}

Answer 2

如果您想保持sponsor更高，只需将width: 100%添加到赞助商。

您还可以将sponsor和beyza包装在另一个div元素中并制作它： display: flex; flex-direction: row; justify-content: space-between, align-items: flex-start;

从赞助商中删除margin-bottom
将align-self: flex-end添加到beyza

Answer 3

这里有一些问题：

你错过了你的关闭锚

<a href="https://graphicdialogue.co">GRAPHIC DIALOGUE</div>
错字

.container{width: %100}
adjustmargin底

.sponsor { float: left; padding-left: 15px; margin-bottom: 15px; //this is the problem-try reduce the size display: block; }

页脚中包含div下的额外空间

3 个答案: