是否有可能渲染（内联）div从右到左而不是默认的从左到右的孩子？ [英] Is it possible to render (inline) children of a div Right-To-Left instead of the default Left-To-Right?

问题描述

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

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.

但我想要某个 div 的子

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

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

问题：

=http://jsfiddle.net/fqoxpn9e/ =nofollow> JSFiddle这里

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>

，在 .left-cell .step-container 中，我有三个元素出现在同一行： .content-box ， .notch-outer-container 和 .number-outer-container 并使 .notch 看起来与右侧单元重叠宽度的50％，我给予 .number-outer-container a position：absolute; 和 .notch-outer-container a margin-right 将 number-outer-container （ .middle-cell 和）右侧单元显示为重叠减少50％的宽度。

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.

问题是在 .right-cell ，这个策略不工作。 strong>首先， .number-right-container 出现，仍然是 absolute ，我不能给它 left 属性的值相对于其父项（，否则我会尝试一个 left：-25px 25px 在其父对象的左边缘之后，因为它具有 width：50px; ）。那么 .notch 隐藏在它的下面...

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...

因此，我正在考虑找到一种方法，可以从RTL（从右到左）而不是LTR只在页面上的 .right-cell 内获取元素。 所以我可以遵循我在 .left-cell 中使用的相同策略，在 .right-cell。

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.

推荐答案

有很多方法可以使用 flex ing， float s或其他选项，但我想说的最简单的方法之一，如果其余的布局工作， to，是使用方向属性。

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>

这篇关于是否有可能渲染（内联）div从右到左而不是默认的从左到右的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！