Question

我需要在垂直时间线下面显示新闻，这个例子非常适合我正在寻找的东西我可以进一步修改我的要求但是我需要同样的英语＆amp;阿拉伯语。英文版：https://codepen.io/jplhomer/pen/lgfus

阿拉伯语的修改版（RTL）https://codepen.io/anon/pen/LboryL

@import "compass/css3";

$gray: #dddddd;

h1, h2, h3 {
  font-weight: 300;
}

.container {
  padding: 1em;
}

.timeline {
  position: relative;
  overflow: auto;


  &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 5px;
    background: $gray;
    right: 0;
  }

  h2 {
    background: $gray;
    max-width: 6em;
    margin: 0 auto 1em;
    padding: 0.5em;
    text-align: center;
    position: relative;
    clear: both;
  }

  ul {
    list-style: none;
    padding: 0 1em 0 0 ;
    z-index: 1;
  }

  li {
    background: $gray;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
    direction:rtl;
    text-align:right;

    &:before {
      content: '';
      width: 0;
      height: 0;
      border-top: 1em solid $gray;
      border-right: 1em solid transparent;
      position: absolute;
      right: -1em;
      top: 0;
    }
  }

  h3 {
    margin-top: 0;
  }

  time {
    font-style: italic;
  }
}

@media screen and (min-width: 40em) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .timeline {
    &:before {
      left: 50%;

    }

    ul {
      padding-left: 20px;
      max-width: 700px;
      margin: 0 auto;

    }

    li {
      width: 42%;
    }

    li:nth-child(even) {
      float: left;
      margin-top: 2em;
    }

    li:nth-child(odd) {
      float: right;

      &:before {
        border-top: 1em solid $gray;
        border-right: 1em solid transparent;
        left: auto;
        right: -1em;
      }
    }

    li:nth-of-type(2n+1) {
      clear: both;
    }
  }
}

我已修改CSS以使用RTL语言，但第一个元素ul的指针显示右侧的箭头，我试图在左侧显示箭头。我尝试了一些东西，但是这个或其他的东西在这个中断了

Answer 1

我通过更改

来修复它

li:nth-child(odd) {
  float: right;

  &:before {
    border-top: 1em solid $gray;
    border-left: 1em solid transparent;
    right: auto;
    left: -1em;
  }
}

工作解决方案：https://codepen.io/anon/pen/LboryL

对齐RTL语言的元素

1 个答案: