Question

我必须根据日期逐个显示图像，每个图像之间都有一个箭头图像。有点像这样： A-＆GT; B-＆GT; C-＆GT; d

我在div上显示。

当图像很多时会出现问题。 div的宽度是常量，图像像下一行一样到达下一行：

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

在这种情况下，我希望显示这样的图像（请参阅此时的箭头符号图像和图像流程）：

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

是否有内置控件或以任何方式实现此目的？

Answer 1

您可以尝试将其添加到主广告div dir="rtl"

有关详细信息，请阅读CSS Direction

Answer 2

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>

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

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

3 个答案: