如何在容器内对齐一个 div，另一个与浏览器窗口的右端对齐？

Question

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

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

您可以使用固定位置，然后将左 0 用于要左对齐的 div，将 0 用于要右对齐的 div。 CSS会是这样的

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

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

Answer 2

是的， 先把你想要的 div 放在浏览器的右边容器外面，因为它在 div 里确实没有意义，但是如果你想把它放在容器里，它仍然是可能的。

试试这个

// if the right-box is outside the container
.right-box
{
position: absolute;
right : 0;
}


// if the right-box is inside the container
.right-box
{
position: absolute;
left : 100%;
}

注意：第二个从容器的最右侧开始右框，可以根据自己的喜好进行调整。

左框类似