在图像顶部对齐元素

Question

我有一个我试图复制的设计，但是我在调​​整一些项目时遇到了问题，并且想知道最好的方法是什么，因为我想尽可能避免绝对定位。

设计如下

所以他们的灰色区域是一个部分。我设想的是包含三个col-md-4列的行。在第一列中，我有一些文本应该在中间垂直对齐。所以我有以下

<div class="col-md-4">
    <div class="">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim</p>
    </div>
</div>

问题是，如果我将它应用于整个部分，它似乎只是在中间垂直对齐，这使得其他列的内容垂直对齐，这是我不想要的。所以我需要以某种方式只使它垂直对齐。

第二栏非常简单，只有一张图片。

我遇到问题的地方是第3列，两个矩形部分位于第1列和第2列。我认为我必须使用绝对定位吗？这会对响应能力产生影响吗？

第二个问题是灰色区域设置为100vh。然而，这些直肠的一部分走出这个区域，因为它们绝对定位，所以它们不会推动内容。

我已经复制了一个应该展示我的问题的小提琴，你可能需要扩展预览区JSFiddle

对于如何实现此类布局的任何建议都将不胜感激。

由于

Answer 1

问题1 将第一列中的内容垂直对齐到中心。

这是对您的第一列进行集中对齐的布局更新。

https://jsfiddle.net/z69w9u4g/5/

总结一下，我在正确的地方添加了几个课程

<section class="row my-section-row">
        <div class="col-md-4 my-section-row-description">
            <div class="my-section-row-description-body">

我添加了这个CSS

.my-section-row {
  display: flex;
  align-items: stretch;
}

.my-section-row-description {
  display: flex;
}

.my-section-row-description-body {
  align-self: center;
}

现在图片

首先，容器应该有填充底部。该值应该在px中，因为它完全取决于垂直溢出并且是随机的图像的高度。

第1列和第3列应该是位置relative，其中的所有图像都应该是绝对位置。尝试将所有top和left值转换为percent，并将width转换为percent。如果需要，设置其bottom属性以使其与底部对齐。

与第1列和第2列重叠的图片不应位于任何列中，而应位于位置.container的{​​{1}}或.row内。它的直接父母应该是职位absolute。 您可以使用左relative并将33%设置为translateX。假设第1列和第2列具有相同的宽度，则将其置于第1列和第2列之间。如果需要，设置其-50%属性以使其与底部对齐。

希望这是有道理的。

更新

让您更好地了解此图片

bottom有一个.container和一个margin

padding-bottom和.container将具有相对位置

图像框将具有绝对位置。它们用颜色编码来表示它们在DOM中的位置。

此外，我认为您应该read more关于.column-3和relative定位。