HTML/CSS - 从容器的右侧定位标签，到另一个标签的右侧

Question

我有一个网页，其中有一个包含 3 个图像的 div 容器。图片 1 填满了左侧容器的高度。图片 2 位于容器的中央，但位于图片 1 的右侧。图片 3 位于容器的右下角。我希望图像 3 始终位于图像 1 的右侧。有没有办法使用 html/css 实现此目的？目前，如果我调整窗口大小，图像 3 会覆盖(或被图像 1 覆盖)(取决于 z-index)。

示例图:

- - - - - - - - 
|   |         |
|   |         |
|   | - - |   |
|   | - - |   |
|   |   | - - |
|   |   | - - |
- - - - - - - -

示例代码:

<div background="{some background}" style="width: 100%; height: 750px; position: relative; background: {some background};">
    <img src="{some image 1}" style="position: absolute; width: auto; height: 100%; left: 0px; z-index: 1;">
    <img src="{some image 2}" style="position: absolute; width: 456px; height: auto; margin: auto; top: 0; left: 432px; bottom: 0; z-index: 2;">
    <img src="{some image 3}" style="position: absolute; width: 456px; height: auto; margin: auto; bottom: 25px; right: 25px; z-index: 2;">
</div>

Answer 1

最简单的方法是在父级Div上设置min-width

<div background="{some background}" style="width: 100%; min-width: 912px; height: 750px; position: relative; background: {some background};">
    <img src="{some image 1}" style="position: absolute; width: 456px; height: 100%; left: 0px; z-index: 1;">
    <img src="{some image 2}" style="position: absolute; width: 456px; height: auto; margin: auto; top: 0; left: 432px; bottom: 0; z-index: 2;">
    <img src="{some image 3}" style="position: absolute; width: 456px; height: auto; margin: auto; bottom: 25px; right: 25px; z-index: 1;">
</div>

请注意，当您同时定义 img 1 的宽度然后将最小宽度设置为加在一起的两个图像时效果最佳。