相对定位无法正常工作CSS

Question

所以我正在尝试定位我的内容框并且其工作正常，但是当我尝试更改正确的值时它不允许。你可以看到我有四个图像，但我想显示三个，所以我试图增加正确的值，这样盒子只能容纳三个（并且还可以将它带到中心一点点）

我可以通过将其更改为padding-right而不是right来使其工作，但我不明白为什么这样做？我的理解是：填充=内容和边界之间的距离，右边=距离边缘有多远？

图像： 这是我的内容盒代码（图像在另一个盒子里面）

.imagesArea {
    position:relative;
    top:15px;
    left:100px;
    padding-right:180px;


}

由于

编辑：html（删除了一些图像代码）

<div class="imagesArea">

<div class="images">
    <figure>
        <a href="photos/image1.jpg"><img src="photos/image1.jpg" alt=”Photo” width=150 height=150></a>
    <figcaption>Watch #1</figcaption>
    </figure>
    </div>

<div class="images">
    <figure>
        <a href="photos/image2.jpg"><img src="photos/image2.jpg" alt=”Photo” width=150 height=150></a>
    <figcaption>Watch #2</figcaption>
    </figure>

</div>

<div class="images">
    <figure>
       <a href="photos/image3.jpg"><img src="photos/image3.jpg" alt="Photo" width="150" height="150"></a>
        <figcaption>watch #3</figcaption>
    </figure>
</div>
</div>

Answer 1

您对相对定位的理解是完全错误的。这听起来好像你把它与边缘混淆了。

通过相对定位，元素的大小和位置根据正常流量（即好像它是静态定位的），然后整个框根据left / {偏移 {1}} /等。这可能导致它与其他元素重叠。

有关直观表示，请参阅this example。

它根本不会调整盒子的大小，因此它不会影响它可容纳多少内容。

如果您想控制元素的宽度，请使用right，width，padding和/或border。

Answer 2

您可以为内容div 图像

使用保证金

.images{
    display: inline-block;
    margin:0 20px 0 20px;
}

并设置父div

.imagesArea {
    position:relative;
    top:15px;
    left:100px;
    padding-right:180px;
    text_align:center;
}

如果你想连续显示3张图片，它将适合你。