相对定位无法正常工作CSS

debugcn 发表于 Dev

亚历克斯2014

因此，我尝试将内容框及其左位置正常工作，但是当我尝试更改右值时，它不允许这样做。如您所见，我有四个图像，但我想显示三个图像，因此，我试图增加正确的值，以便该框只能容纳三个图像（并且将其放到中间一点）

我可以通过将其更改为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>

昆汀

您对相对定位的理解是完全错误的。听起来好像您将其与边距混淆了。

通过相对定位，可以根据正常流（例如，就好像它是静态定位）来调整元素的大小和位置，然后根据/ / etc偏移整个框。这可能导致它与其他元素重叠。leftright

请参见此示例以直观表示。

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

如果你想控制元素有多宽，使用width，padding，border和/或margin。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。