实现facebook一样的图像封面

Question

我正在努力实现类似于facebook的图像封面如下，但无法实现欲望效果。这是我尝试的CSS。正如大家所看到的，div内容定位不正确。

	.profile {
		position: relative;
	}
	
	.profile-cover img{
		width: 100%;
	}

	.profile-photo {
		position: absolute;
		left: 20px;
		bottom: -60px;
	}

	.profile-info {
		padding-right: 120px;
	}

<div class="profile">
	<div class="profile-cover">
		<img src="http://dummyimage.com/1200x300/000/fff" />
	</div>
	<div class="profile-details">
		<div class="profile-photo">
			<img src="http://dummyimage.com/100x100/eee/000" />
		</div>
		<div class="profile-info">
			Profile info here
		</div>
	</div>
</div>

<div>
	Remaining content here
</div>

Answer 1

我不确定你是否想要这个，因为你只是说＆＃34; div内容没有正确定位＆＃34;，但是我很安静，确定它就是这样。

所以，如果没有，请告诉我。

使用绝对定位从元素中流出。所以，下一个继续，好像这个元素不存在。这就是其他人在这个绝对因素下展示的原因。

下次，请使用其ID，类名或我们可以确定您所知道的任何内容来确定哪个DIV。

＆＃13;

＆＃13;

.profile {
		position: relative;
	}
	
	.profile-cover img{
		width: 100%;
	}

	.profile-photo {
		display: inline-block;
		margin-top: -60px;
		margin-left: 20px;
	}

	.profile-info {
		display: inline-block;
		padding-right: 120px;
	}

＆＃13;

<div class="profile">
	<div class="profile-cover">
		<img src="http://dummyimage.com/1200x300/000/fff" />
	</div>
	<div class="profile-details">
		<div class="profile-photo">
			<img src="http://dummyimage.com/100x100/eee/000" />
		</div>
		<div class="profile-info">
			Profile info here
		</div>
	</div>
</div>

<div>
	Remaining content here
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我就是这样做的......

.profile {
    margin-bottom: 15px;
}

.profile-cover img {
  width: 100%;
}

.profile-photo {
  display: inline-block;
  margin-left: 20px;
  margin-top: -24px;
}

.profile-info {
    display: inline-block;
    position: relative;
    top: -25px;
    left: 10px;
}

<div class="profile">
	<div class="profile-cover">
		<img src="http://dummyimage.com/1200x300/000/fff" />
	</div>
	<div class="profile-details">
		<div class="profile-photo">
			<img src="http://dummyimage.com/100x100/eee/000" />
		</div>
		<div class="profile-info">
			Profile info here<br>
            More info here
		</div>
	</div>
</div>

<div>
	Remaining content here
</div>