按顺序左右浮动4个元素答案

【问题标题】：Floating 4 elements left and right in an order按顺序左右浮动4个元素
【发布时间】：2020-07-04 13:54:38
【问题描述】：

我在设置订单导航时遇到问题。我有 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。但我找不到任何答案。如果我得到这项工作会更有帮助。

【问题讨论】：

标签： html css css-float footer

【解决方案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>

【讨论】：

感谢@rangerz。但我想保留 4 个 div，因为我需要在移动设备的最后更改版权文本的位置。
@WBGUY001 我修好了。