html - 如何对齐容器内的一个 div 而另一个对齐到浏览器窗口的右端？

Question

我在一个容器内有 2 个 div，我想通过 css 将一个 div 设置为左​​对齐到容器，另一个设置为与浏览器的右端对齐。这可能吗？

Example Image

有人帮我解决这个问题吗？

.container {
  background: #ccc;
  height: 400px;
  max-width: 500px;
  margin:0 auto;
}

.outer {
  background: #f8f9fa;
  margin-top: 40px;
}

.left-box {
  background: #000;
  color: #fff;
  padding: 10px 0;
  float:left;
  width:50%;
  margin-top:20px;
  height:100px;
}

.right-box {
  background: #EC8400;
  padding: 10px 0;
  float:right;
  margin-top:20px;
  width:50%;
  height:100px;
}

<div class="container">
  <div class="outer">
    <div class="left-box">
      some text
    </div>
    <div class="right-box">
      text/image here
    </div>
  </div>
</div>

Answer 1

您可以使用 position fixed，然后 left 0 用于要左对齐的 div 和 right 0 用于要右对齐的 div。 Css 会是这样的

.divleft {
    position: fixed;
    left: 0;
}

.divright {
    position: fixed;
    right: 0;
}