是否有一种方法可以在css中从右到左而不是从正常的左向右转换像素流？

Question

例如，我们有一个元素(让我们称之为联系人框)，它总是在页面的右边，我们希望一系列不同宽度的图像沿着左边运行。每个图像的右手边应该总是从接触框的左手边缘20 box。

如果我们知道联系人框的宽度和位置，并且在图像上设置了右侧属性，那么它将从图像的左手边缘而不是右边计算。这不会达到预期的结果，因为图像的宽度是可变的。

是否有办法在每个元素的基础上将这种行为从右向左转换，或者是在javascript中摸索它的唯一方法？

编辑:要清楚-图像的右边缘对齐20 box与左侧边缘的接触盒容器元素。图像是可变的宽度和响应，就像接触盒一样.

下面的图像是元素如何定位的一个示例。

​

​

Answer 1

现在我想我明白了！使图像成为contact-box的子级。将contact-box设置为position:relative，将子图像设置为position:absolute。现在将图像设置为right:100%，并给它一个right-margin of 20px。

<div class="contact-box">
  contact-box
  <img class="goLeft" src="http://placehold.it/350x150" />
</div>

在CSS中：

.contact-box {
  width: 200px;
  height: 200px;
  float: right;
  position: relative;
  background-color: #ccc;
}

.contact-box img.goLeft {
  position: absolute;
  right: 100%; /* aligns the right edge of the image to the left edge of the container*/
  margin-right: 20px; /* adds 20px spacing between the image and the container */
}

为了本演示的目的，我将contact-box元素向右浮动，但它不需要浮动才能工作。

示例：https://jsfiddle.net/qvgknv4g/

*替代解决方案*

您还可以使用CSS的direction属性，并将其设置为rtl (用于从右到左)。这将使用浏览器的自然呈现流，而图像则是contact-box的兄弟级

<div class="outer">
  <div class="contact-box">
    contact-box
  </div>
  <img class="goLeft" src="http://placehold.it/180x150" />
</div>

和CSS：

.outer {
  direction: rtl;  /* This makes the magic happen */
  border: solid 1px #000;
}

.contact-box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  display: inline-block;
}

img {
  vertical-align: top; /* by default the image will render bottom-aligned to the text in conten-box.  This fixes that. */
  margin-right: 20px;
}

示例：https://jsfiddle.net/qvgknv4g/2/

Answer 2

您需要将图像定位在联系人框中，并将position: absolute;分配给它。确保联系人盒容器有position: relative; or绝对值，否则图像的定位将不能像预期的那样工作。

然后将联系人框的宽度+20 box应用于right属性。

.contactbox {
    position: relative;
}
.contactbox img {
    position: absolute;
    right: 220px; /* example in case your box is 200px wide */
    top: 0;
}

Ofc，这只在你的接触器没有overflow: hidden;的情况下才能工作。

Answer 3

你的问题不太清楚，但我想这就是你想要的：

如果您可以在图像周围添加一个包装器，则可以将包装设置为离您想要的左侧边缘有多远的宽度，然后将图像浮动到右侧。

在你的例子中，它应该是这样的：

HTML

<div id="contact-box">
    <div id="container">
        <img src="http://placehold.it/350x150" />
        <img src="http://placehold.it/250x100" />
        <img src="http://placehold.it/300x100" />
        <img src="http://placehold.it/200x150" />
    </div>
</div>

CSS

#container {
    width:20px;
}
img {
    float:right;
}

下面是一个例子：http://jsfiddle.net/3hxjp89r/

请记住，在上面的小提琴，我调整数字只是为了显示它是如何工作的。如果您真的想要从边缘到右对齐的图像20 of，那么更改#container div的宽度。