Question

这就是我想要实现的目标：

位于两个单独div标签之间的图片，例如facebook个人资料页面：

我在这里搜索，但解决方案没有多大帮助。它按照我的意愿定位，但由于它是自举，它应该响应，当屏幕尺寸减小时，图像位置会发生变化，这是我不想要的。

这是代码（可能不适合，因为我只是在测试） -

HTML -

<div class="container">
        <div class="jumbotron jumbo" id="custjumbo">
            <h1>This is a jumbotron... </h1>
            <h2>Let's see what can we make of it..</h2>

            <br>

            <img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger" 
            width="304" height="236">
        </div>
</div>

CSS -

.container {
    background-color: cadetblue;

    }

    .jumbo {

    margin-top:20px;
    position: relative;
    }
    .img-thumbnail {
    position: absolute;
    bottom: -60px;
    right: 200px;
}
    img {
    display: block;
    width: 200px;
    height: 200px;
    background: green;
    }

这就是我所得到的：

Answer 1

您可以尝试将img-thumbnail更改为position：relative并使用＆＃39; bottom：-60px＆＃39;而不是绝对定位，可以在不使用绝对定位的情况下重新定位图像

Answer 2

检查

.container {
    background-color: cadetblue;
    width:100%;

    }

    .jumbo {

    margin-top:20px;
    position: relative;
    }
    .img-thumbnail {
    position: absolute;
    bottom: -90px;
    left:15%;
}
    img {
    display: block;
    width: 200px;
    height: 200px;
    background: green;
    }
    .bottom-div {
    height:200px;
    background-color:red;}

<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
        <div class="jumbotron jumbo" id="custjumbo">
            <h1>This is a jumbotron... </h1>
            <h2>Let's see what can we make of it..</h2>

            <br>

            <img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger" 
            width="304" height="236">

        </div>
                    <div class="bottom-div"></div>
</div>

在Bootstrap中将图像定位在div标签/标签上

2 个答案: