如何在div中从右到左显示图像
Posted
技术标签:
【中文标题】如何在div中从右到左显示图像【英文标题】：How to display image in div from right to left 【发布时间】：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 来完成。
另请注意，我们不知道静态时图像和箭头的大小。
【参考方案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'); 这是主要思想，但可能与您的代码不同。以上是关于如何在div中从右到左显示图像的主要内容，如果未能解决你的问题，请参考以下文章