Question

按顺序设置导航时出现问题。我有4个div标签，并且应该按左，右，右，左的顺序排列。所以我希望我的导航看起来像这样

我对浮动权利有疑问。我已经尝试过了

.footer {

}

li {
  background-color: yellow;
  display: inline-block;
}

.one {
  background-color: orange;
}

.two {

}

.copy {
  background-color: blue;
}

.two, .three {
  float: right;
  background-color: aqua;
  clear: right;
}

<html>
  <body>
    <footer class="footer">
      <div class="one" >
        <img src="https://via.placeholder.com/250x100" alt="footer" />
      </div>
      <div class="two">
        <ul>
          <li>privacy</li>
          <li>terms and conditions</li>
          <li>contact us</li>
        </ul>
      </div>
      <div class="three">
        <ul>
          <li>instagram</li>
          <li>facebook</li>
          <li>twitter</li>
      </div>
      <div class="clear"></div>
      <div class="copy">
        &copy; 2020 mysite.com
      </div>
    </footer>
  </body>
</html>

不知何故，浮动未将我的无序列表保持在顶部。我已经搜索了stackoverflow。但我找不到任何答案。如果我能完成这项工作，将会对您有所帮助。

Answer 1

如果没有更改div结构，只需使用display:gird

.footer {
    display: grid;
    grid-template-columns: 1fr auto;
}

li {
  background-color: yellow;
  display: inline-block;
}

.one {
  grid-area: 1 / 1 / 3 / 2;
  background-color: orange;
}

.two {
  grid-area: 1 / 2 / 2 / 3;
}

.three {
  grid-area: 2 / 2 / 3 / 3;
}

.two, .three {
  background-color: aqua;
  text-align: right;
}

.copy {
  grid-area: 3 / 1 / 4 / 2;
  background-color: blue;
}

<html>
  <body>
    <footer class="footer">
      <div class="one" >
        <img src="https://via.placeholder.com/250x100" alt="footer" />
      </div>
      <div class="two">
        <ul>
          <li>privacy</li>
          <li>terms and conditions</li>
          <li>contact us</li>
        </ul>
      </div>
      <div class="three">
        <ul>
          <li>instagram</li>
          <li>facebook</li>
          <li>twitter</li>
      </div>
      <div class="copy">
        &copy; 2020 mysite.com
      </div>
    </footer>
  </body>
</html>

左右浮动4个元素

1 个答案: