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

Question

通常 HTML 标记的元素按照它们在标记文件中的写入顺序出现，内联元素从左到右出现。

但我希望某个 div 的子元素（只是，不是整个页面的所有元素）从右到左.

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

问题：

.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 a position:absolute; 和 .notch-outer-container a margin-right 将 number-outer-container 推到右侧，使其 看起来与 (.middle-cell 和) right-cell 重叠了 50%宽度。

问题是在 .right-cell 中，这个策略不起作用。 首先出现 .number-right-container，但仍然是 absolute ，我不能给它一个 left 属性相对于它的父级的值（否则我会尝试 left:-25px 让它出现在 25px 后面它父级的左边缘，因为它有 width:50px;)。然后 .notch 就隐藏在它下面...

所以我正在考虑找到一种方法，通过它我可以从 RTL（从右到左）而不是仅在页面上的 .right-cell 内从 LTR 渲染元素。 这样我就可以在 .right-cell.

中遵循我在 .left-cell 中使用的相同策略

Answer 1

有多种方法可以使用 flexing、floats 或其他选项来实现您想要的效果，但我想说的是最简单的方法之一，前提是其余的布局可行如您所愿，就是使用 direction 属性。

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

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

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

Is it possible to render (inline) children of a div Right-To-Left instead of the default Left-To-Right?

html

css

css-position