Question

我的问题是彼此之间有2个div堆叠，我不确定为什么。当我放5个div框时，就会发生这种情况。

我只想将所有div排成一行，但我不确定为什么它不起作用

.Box {
  height: 200px;
  background-color: pink;
  width: 18%;
  float: left;
  margin: 5px;
  margin-left: 10.5px;
}

.wrapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  border: solid black 5px;
  float: left;
  margin: 100px 40px;
}

.Logo1 {
  width: 100px;
  height: 100px;
  background-color: grey;
  float: left;
  margin: 25px;
  background: url(https://via.placeholder.com/100); /*url(Pictures/animal-2028258.png); original img path*/
  background-size: contain;
}

<div class="wrapper">
  <div class="Box">
    <div class="Logo1"></div>
  </div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
</div>

Answer 1

重要的是，如果您使用百分比，那么所有内容都应该灵活，并使用百分比值（例如边距，填充等）。

我已经使用CSS中的百分比更新了所有框的大小和边距，它可以正常工作。

希望这会有所帮助！

.Box {
  height: 200px;
  background-color: pink;
  width: 18%;
  float: left;
  margin: 1%;
}

.wrapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  border: solid black 5px;
  float: left;
  margin: 100px 40px;
}

.Logo1 {
  width: 80%;
  height: 80%;
  background-color: grey;
  float: left;
  margin: 10%;
  background: url(https://via.placeholder.com/100); /*url(Pictures/animal-2028258.png); original img path*/
  background-size: contain;
  background-repeat: no-repeat;
}

<div class="wrapper">
  <div class="Box">
    <div class="Logo1"></div>
  </div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
</div>

我已经建立了徽标，但是我的网站上有两个徽标？

1 个答案: