是否可以渲染（内联）div的子项从右到左而不是默认的从左到右？

Question

通常，HTML标记的元素按照它们在标记文件中的写入顺序显示，并且内嵌元素从左到右显示。

但我希望某个div 的孩子（仅限整个页面的所有元素）从右到左显示。 < / p>

如果您想知道为什么需要它，我想这样做来解决以下问题：

问题：

JSFiddle here.

.wrapper {
  height: 100%;
  width: 826px;
  margin: 50px auto;
  display: table;
  background-color: #003b80;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
.left-cell {
  width: 50%;
  background-color: chocolate;
}
.right-cell {
  background-color: darkslategrey
}
.step-container {
  max-height: 200px;
  font-size: 0;
}
.right-cell .step-container {
  margin-top: 125px;
}
.content-box {
  display: inline-block;
  width: 350px;
  height: 200px;
  /*border: 5px solid blue;*/
  font-size: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  background-color: dodgerblue
}
.right-cell .content-box {
  background-color: darkturquoise
}
.middle-cell {
  height: 100%;
  background-color: white;
  width: 1.5px;
  font-size: 0;
  box-shadow: 0px 0px 10px black;
  -moz-box-shadow: 0px 0px 10px black;
  -webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
  display: inline-block;
  position: absolute;
}
.left-cell .number-outer-container {
  /*margin-left:39px;*/
}
.number-inner-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.number-banner {
  width: 50px;
  height: 50px;
  background-color: crimson;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.notch-outer-container {
  display: inline-block;
}
.left-cell .notch-outer-container {
  margin-right: 24px;
}
.right-cell .notch-outer-container {
  margin-left: 10px;
}
.notch-inner-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notch {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.left-face-notch {
  border-right: 15px solid #520f23;
}
.right-face-notch {
  border-left: 15px solid #571780;
}

<div class="wrapper">


  <div class="cell left-cell" align="left">

    <div class="step-container">
      <div class="content-box"></div>



      <div class="notch-outer-container">
        <div class="notch-inner-container">
          <div class="right-face-notch notch"></div>
        </div>
      </div>



      <div class="number-outer-container">
        <div class="number-inner-container">
          <div class="number-banner"></div>
        </div>
      </div>

    </div>
  </div>



  <div class="cell middle-cell"></div>



  <div class="cell right-cell" align="right">

    <div class="step-container">

      <div class="number-outer-container">
        <div class="number-inner-container">
          <div class="number-banner"></div>
        </div>
      </div>



      <div class="notch-outer-container">
        <div class="notch-inner-container">
          <div class="left-face-notch notch"></div>
        </div>
      </div>



      <div class="content-box"></div>

    </div>

  </div>


</div>

在此SSCCE中，在.left-cell .step-container内，我有三个元素出现在同一行：.content-box，.notch-outer-container和.number-outer-container;为了使.notch看起来与right-cell的宽度重叠50％，我给了.number-outer-container一个position:absolute;和.notch-outer-container一个{{1}它将margin-right推向右侧，使其看起来与（number-outer-container和）.middle-cell重叠 50％的宽度。

问题在于right-cell，此策略无效。首先.right-cell出现，但仍然是.number-right-container，我无法给出它是absolute属性，其值相对于其父级（否则我会尝试left使其在其父级的左边缘后面显示为left:-25px，因为它具有{{ 1}} 的）。然后25px隐藏在它下面......

因此，我正在考虑找到一种方法，通过该方法，我可以从RTL（从右到左）获取元素，而不是仅在页面上width:50px;内的LTR。 以便我可以遵循.notch

中用于.right-cell的相同策略

Answer 1

有许多方法可以使用flex ing，float或其他选项来实现您想要的效果，但我会说最简单的方法之一，如果其余的布局像您一样工作想要它，是使用direction属性。

div {
  direction: rtl;
}
div div {
  display: inline-block;
  direction: ltr;
}

<div>
  <div>first</div>
  <div>second</div>
  <div>last</div>
</div>