Question

我有一个网页，其中包含一个包含3个图像的div容器。图像1填充左侧容器的高度。图像2在容器中居中，但在图像1的右侧。图像3位于容器的右下角。我希望Image 3始终位于Image 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

尝试将“位置”更改为“固定”

Answer 2

简单的方法是在父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的宽度时，它最有效，然后将最小宽度设置为一起添加的两个图像。

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

2 个答案: