Question

我正在使用带有一些简单代码的bootstrap。在jumbotron div / container里面我有2张图片。一个左对齐。一个右对齐。在调整浏览器窗口大小时，如何让正确的图像漂浮在左侧上方/上方？让我发疯了。

<div class="jumbotron">
<div class="container">

<div class="left-image">
<img src="left-image.png">
</div>

<div class="right-image">
<img src="right-image.png">
</div>

</div>
</div>

我认为像这样的简单css会这样做吗？

.left-image {
float: left;
}
.right-image {
float: right;
z-index: 999;
}

Answer 1

如果您希望图片重叠，则需要使用position: absolute

.left-image{
    position: absolute;
    left: 200px;
}
.right-image{
    position: absolute;
    right: 200px;
    z-index: 5;
}

编辑上面的左右属性以获得您喜欢的定位。

Example

Answer 2

我认为在左浮动元素上设置一个负边距，并允许浮动右图像重叠。实施例...

.left-image {
float: left;
margin-right: -200px;
}

我现在无法测试，但我认为这应该有用。

使用CSS将一个图像浮动到另一个图像上

2 个答案: