Is it possible to render (inline) children of a di

问题:

Normally the elements of an HTML markup appear in the order they are written in the markup file, and the inline elements appear from left to right.

But I want the children of a certain div (only, NOT all the elements of the entire page) to appear from right to left.

In case you wonder why it is needed, I want to do this to solve the following problem:

PROBLEM:

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>

In this SSCCE, inside .left-cell .step-container, I have three elements appearing on the same line: .content-box, .notch-outer-container, and .number-outer-container; and to make the .notch appear to be overlapping the right-cell by 50% of its width, I gave .number-outer-container a position:absolute; and .notch-outer-container a margin-right which pushes the number-outer-container to right side to an extent that it appears to be overlapping the (.middle-cell and) right-cell by 50% of it's width.

The problem is that in the .right-cell, this strategy is NOT working. First the .number-right-container appears and still it is absolute, I can not give it a left property with value relative to its parent (otherwise I would try a left:-25px to make it appear 25px behind the left edge of its parent, because it has width:50px;). Then the .notch is hidden below it...

So I am thinking about finding a way through which I can get the elements render from RTL (Right To Left) rather than LTR only inside .right-cell on the page. So that I can follow the same strategy I have used for the .left-cell, in the .right-cell.

回答1:

There's numerous ways to achieve what you want using either flexing, floats or other options, but I'd say one of the easiest ways, if the rest of the layout works as you want it to, is to use the direction attribute.

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

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