Html 使用所有建议的方法后，无法获得所需的div溢出

我希望我的div对齐如下图所示

但我得到的是这样的东西

只有固定的定位对我有效。。。但我不想用那个

这是我的html代码

<div class="profileHeader">
    <span class="img" style="background: url(http://localhost/Amar/public/assets/images/temp/restaurant.jpeg) #B3E5FC center center / cover no-repeat;"></span>
    <span class="gradientBottom"></span>
    <div class="col-lg-3">
        <div class="profilePicWrapper">
            <div class="profilePic">
                <img src="assets/images/temp/shop.jpg" alt="Alt here"/>
            </div>
        </div>
    </div>
</div>
<div class="optionWrapper"></div>

我不知道出了什么问题。。。请帮助…

使用您的原始HTML（经过一次更改，我将内联CSS拉出）并删除所有与您试图实现的定位无关的CSS：

.profileHeader{
宽度：570px；高度：210px；
位置：相对位置；
背景：url（'http://placehold.it/570x210'）#B3E5FC中/盖无重复；
}
.profilePic{
边框：4px实心#FFF；
位置：绝对位置；
右：50px；
底部：-80px；
}
.期权包装{
右边距：400px；/*为剖面图留出空间*/
最小高度：80px；/*确保配置文件图片不与以下内容重叠*/
}

这是元素之前的内容

这是optionWrapper的内容
这是元素后的内容

为什么不想使用固定定位？我的网站反应灵敏，需要进行大量调整才能处理固定定位……我想应该是这样的。你能把这些图像放上去让我用在小提琴上吗？好的，等等。。。我正在上传…好的，这是链接。。。谢谢你的努力，先生，但我认为我的网站是有响应的，我需要在图片左侧显示导航栏链接的内容…这应该与响应性设计配合得很好（无论容器大小，配置文件图片将相对于容器元素的右/底部进行定位）。我不确定你的确切意思“我需要将内容显示为图像左侧的导航栏链接“--哪个图像？什么内容？如何定位？如果你想让这些信息成为答案的一部分，请在问题中包含这些信息。在哪幅图片的左边——profilePic或profileHeader？它相对于其他国家的定位应该是什么？再次强调：如果你在回答中需要一些具体的东西，你需要把它包括在问题中。我们看不懂头脑。我猜了一下位置，因为你似乎不愿意描述它，并将其包含在答案中。

.profileHeader {
height: 400px;
position: relative;
}
.profileHeader .gradientBottom {
left: 0;
bottom: 0;
width: 100%;
height: 50%;
position: absolute;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(20%,rgba(0,0,0,.13)),color-stop(100%,rgba(0,0,0,.5)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
}
.profilePicWrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.profilePic {
width: 100%;
padding: 5px;
background-color: #fff;
border: 1px solid #999;
position: absolute;
z-index: 10;
margin-top: 200px;
}
.profilePic img {
width: 100%;
display: block;
}
.optionWrapper {
width: 100%;
height: 50px;
background: #fff;
text-align: center;
position: relative;
border-bottom: 1px solid #414042;
}