html - 实现 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

我不太确定你是否想要这个，因为你只是说“div 内容没有正确定位”，但我很确定就是这样。

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

使用绝对定位让元素脱离流。所以，接下来的继续，就好像这个元素不存在一样。这就是其他人在这个绝对元素下展示的原因。

下次，请使用其 id、类名或任何我们可以确定您正在谈论的内容来确定哪个 DIV。

.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;
	}

<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>