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

Question

我有一个带有3个图像的div容器的网页。图1填充了左侧容器的高度。图像2位于容器的中心，但位于图像1的右侧。图像3位于容器的右下角。我希望图片3始终位于图片1的右侧。有没有一种方法可以使用html/css来实现这一点？目前，如果我调整窗口大小，Image 3会覆盖（或覆盖）Image 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

<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的宽度时，它的效果最好，然后将最小宽度设置为添加在一起的两个图像。

Answer 2

尝试改变 '位置' 到 '固定'