css向左或向右设置为0，具体取决于框边框

Question

我有下一个小提琴https://jsfiddle.net/76s7jn4q/2/

<div class="outer">
  <div class="inner1">
    <div class="box1">
      super long text
    </div>
  </div>
  <div class="inner2">
    <div class="box2">
      super long text
    </div>
  </div>
</div>

如何使<div class="box">中的文字可见，放置在1行，并左右对齐<div class="inner">边框，具体取决于<div class="outer">边框的位置（向右或向左）。我已经完成了box1右：0但我需要它是自动的

Answer 1

替代方案你可以使用它：

display: flex;
flex-direction: row-reverse;

您需要定位项目/块或您想要的任何订单都可以使用flexbox完成，并且您可以获得更好的响应式设计。易于维护和更新。在这里阅读更多内容：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.outer {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.inner1 {
  position: relative;
	width: 80px;
  height: 80px;
  margin-left: auto;
  border: 1px solid blue;
	display: flex;
	flex-direction: row-reverse;
}

.inner2 {
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: auto;
  border: 1px solid blue;
}

.box1 {
  position: absolute;
  border: 1px solid red;
  width: auto;
  overflow: auto;
  white-space: nowrap;
	text-align: right;
}

.box2 {
  position: absolute;
  border: 1px solid yellow;
  width: auto;
  overflow: auto;
  white-space: nowrap;
}

<div class="outer">
  <div class="inner1">
    <div class="box1">
      super long text
    </div>
  </div>
  <div class="inner2">
    <div class="box2">
      super long text
    </div>
  </div>
</div>

Answer 2

实际上它很简单，你只需要为overflow设置PARENT元素hidden，即inner1和inner2

https://jsfiddle.net/76s7jn4q/8/