Question

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

有人帮助我在这里修复这个小提琴吗？

.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%;
}

注意：第二个从您的容器的最右端开始，您可以根据自己的喜好调整右盒。

类似于左框

如何将一个div对准容器内的另一个div对准浏览器窗口的右端？

2 个答案: