如何从右到左显示div中的图像

I had to display images one by one according to dates , each having an arrow image in between. Some thing like this : A->B->C->D

我必须根据日期逐个显示图像,每个图像之间都有一个箭头图像。这样的事情:A-> B-> C-> D.

I display that on a div.

我在div上显示。

The problem occurs when there are lot of images. The width of div is constant and the image go to the next line like this :

当有很多图像时会出现问题。 div的宽度是常量,图像像下一行到下一行:

A->B->C->D->
E->F->G->
H->I

In this situation i wish to display the images like this (please see the arrow symbol image and image flow this time):

在这种情况下,我希望显示这样的图像(这次请看箭头符号图像和图像流):

A->B->C->D->
G<-F<-E 
H->I

Is there inbuilt control or any way to achieve this ?

是否有内置控制或任何方式来实现这一目标?

3 个解决方案

#1

JS + CSS

var correctDirection = function() {
  var direction = null;
  var lastTop = null;

  $('div').each(function() {
    var $entity = $(this);
    var top = $entity.offset().top;
    if (lastTop != top) {
        lastTop = top;
        direction = direction == 'ltr' ? 'rtl' : 'ltr';
    }
    $entity.addClass(direction);
  });
};

correctDirection();
$(window).on('resize', correctDirection);

div {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  margin: 2px;
  float: left;
  position: relative;
}

div:after {
  position: absolute;
  color: green;
  top: 40%;
}

div.ltr {
  margin-right: 20px;
}

div.ltr:after {
  content: '→';
  right: -20%;
}

div.rtl {
  margin-left: 20px;
  float: right;
}

div.rtl:after {
  content: '←';
  left: -20%;
}

div:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>

#2

You can try this to add to your main raw div dir="rtl"

您可以尝试将此添加到主要的原始div dir =“rtl”

For more information read here CSS Direction

有关更多信息,请阅读CSS方向

#3

<!doctype html>
<html lang="en">
<head>

<style>
  .floatRight{ 
  }
  .clearBoth{
    clear:both;
  }
  .container{
    width:100%;
  }
  .container .floatRight{
    float:right;
  width:9%;
  margin-right: 1%;
  background:#cdcdcd;

    height:100px;
  }
</style>
</head>
<body>
<div class="container">
 <div class="floatRight">1</div>
<div class="floatRight">2</div>
<div class="floatRight">3</div>
<div class="floatRight">4</div>
<div class="floatRight">5</div>
<div class="floatRight">6</div>
<div class="floatRight">7</div>
<div class="floatRight">8</div>
<div class="floatRight">9</div>
<div class="floatRight">10</div>
<div class="clearBoth"></div>
</div>

</body>
</html>

#1