按顺序左右浮动4个元素

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>

float 无法将我的无序列表保持在顶部。我已经搜索了 Whosebug。但我找不到任何答案。如果我得到这个工作会更有帮助。

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个元素

Floating 4 elements left and right in an order

html

css

css-float

footer