如何在div中从右到左显示图像答案

【问题标题】：How to display image in div from right to left如何在div中从右到左显示图像
【发布时间】：2016-07-16 13:28:05
【问题描述】：

我必须根据日期一张一张地显示图像，每个图像之间都有一个箭头图像。像这样的东西： A->B->C->D

我将它显示在一个 div 上。

当有很多图像时会出现问题。 div 的宽度是恒定的，图像会像这样转到下一行：

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

在这种情况下，我希望显示这样的图像（这次请看箭头符号图像和图像流）：

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

是否有内置控制或任何方法来实现这一点？

【问题讨论】：

float:right; ? jsfiddle.net/rayon_1990/8axvzp83
可能是个好主意。但是如何获取div的宽度以及如何应用如果箭头图像的宽度+其他图像宽度之和超过阈值宽度则反转图像显示流程的逻辑？
所有这些都只能使用 html 和 javascript 来完成。
另请注意，我们不知道静态时图像和箭头的大小。

标签： javascript jquery css asp.net image

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

感谢您的回答。你能解释一下什么是 last 和 top 吗？如果你能解释一下你的逻辑和算法，我真的很感激？谢谢
direction 变量包含 css 类名：'rtl' 或 'ltr'。 lastTop 包含 div 元素的位置（从顶部偏移）。如果最后一个元素的位置（lastTop）和当前元素（top）的位置不同，则表示新行开始，我们需要改变方向。
非常感谢您的回答和帮助。但我对最重要的词感到困惑。我想到的是每次添加图像时，我都会获取它的宽度并将其与 div 的总宽度（包含这些图像）进行比较。如果总和 > 那么 div 的总宽度。然后我改变箭头方向和方向流。现在它与您的 top 逻辑有何不同？你能帮我解惑吗
在我的方法中，所有图像都已经在 DOM 中。加载文档时，我得到第一张图片，然后得到它的位置 - 从文档开头到 div 元素的距离 (top)。然后我将 css class 'ltr' 设置为第一个 div。之后 - 我得到第二张图像及其位置。如果第二张图像在另一行，则其顶部位置将与第一张图像不同。在这种情况下，我需要设置 css 类“rtl”。对于其他图像逻辑是相同的：如果行更改（顶部位置更改），我将类名更改为相反。对不起我的英语:)

【解决方案3】：

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

更多信息请阅读这里CSS Direction

【讨论】：

感谢答案，还请查看我希望拥有的输出类型（我需要处理 div 的宽度，如何获得它？如何知道添加时动态增加的 div 宽度图像并决定流必须是 ltr 或 rtl)
你可以使用this document.getElementById("yourDiv").offsetWidth;获取图像div的宽度，也可以获取主原始div，然后计算主div是否已满，为下一个div添加属性 dir $('div').attr('dir', 'rtl'); 这是主要思想，但可能与您的代码不同。