正常情况下，HTML标记的元素出现在它们被写在标记文件的顺序，以及内联元素出现由左到右。
但我想有一定的儿童div （只，而不是所有的整个页面的元素），以从右到左出现。
如果你想知道为什么需要它，我想这样做是为了解决以下问题：
问题：
这里的jsfiddle。
.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一个margin-right其推动number-outer-container ，以右侧的程度，即它似乎是 （ 重叠 .middle-cell和） right-cell通过它的50％的宽度。
问题是，在.right-cell ，这种策略是行不通的。 首先.number-right-container出现，它仍然是absolute ，我不能给它一个left相对于其父值属性（ 否则我会尝试一个left:-25px使其出现25px的左边缘的背后母，因为它具有width:50px; ）。 然后.notch是隐藏在其下方...
因此，我想找到一种方法，通过它我可以得到元素渲染了从RTL（从右到左），而不是只LTR内.right-cell在页面上。 所以，我可以按照我已经使用了相同的策略.left-cell ，在.right-cell.
