有没有办法在css中从右到左改变像素流，而不是从左到右改变正常

Question

比方说，我们有一个元素（让我们称之为联系人框），它始终位于页面右侧，我们希望一系列不同宽度的图像沿着它左侧运行手边。每个图像的右手边缘应始终距离接触盒的左手边缘20px。

如果我们知道接触盒的宽度和位置，并且我们在图像上设置了正确的属性，那么它将从图像的左手边缘而不是右边缘进行计算。由于图像宽度可变，因此无法实现所需的结果。

有没有办法在每个元素的基础上切换这种行为而不是从右向左流动，或者是在javascript中浏览它的唯一方法？

编辑：要清除 - 图像的右边缘与接触盒容器元素左边缘的左边对齐20px。图像是可变宽度和响应，如联系框。

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

Answer 1

现在我想我明白了！使图片成为contact-box的子图片。将contact-box设置为position:relative，将子图像设置为position:absolute。现在将图片设置为right:100%，并为其right-margin 20px。{/ p>

<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绝对值，否则图像的定位将无法按预期工作。

然后将联系人框的宽度+ 20px应用于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/

请记住，在上面的小提琴中，我调整数字只是为了说明它是如何工作的。如果你真的想从边缘和右对齐的图像20px，然后改变#container div的宽度。

Answer 4

如果我理解正确，你在页面右侧有一个联系人框，你想要一列图像漂浮在右边，每个图像与联系人框相距20px。

听起来很简单：

＆＃13;

＆＃13;

#contact-box {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 20%;
  height: 200px;
  background-color: #fda;
  font-size: 24px;
  text-align: center;
}
#images {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  width: 80%;
  background-color: #eee;
}
#images > img {
  float: right;
  clear: both;
  margin: 0 20px 20px 0;
  border: 1px solid #ccc;
  background-color: #123;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

＆＃13;

<div id="images">
  <img width="200" height="150" alt="one">
  <img width="240" height="150" alt="two">
  <img width="200" height="150" alt="three">
  <img width="360" height="150" alt="four">
  <img width="210" height="150" alt="five">
</div><div id="contact-box">
  Contact Box
</div>

＆＃13;

＆＃13;

＆＃13;