html - 在图像顶部对齐元素

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。然而，其中一些矩形超出了该区域，并且因为它们是绝对定位的，所以它们不会将内容向下推。

我复制了一个 fiddle ，它应该可以演示我的问题，您可能需要扩大预览区域 JSFiddle

任何关于如何实现这种类型布局的建议将不胜感激。

谢谢

Answer 1

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

这是对布局的更新，它使第一列居中对齐。

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

总而言之，我在正确的位置添加了一些类(class)

<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 列应为相对位置，其中的所有图像应为绝对位置。尝试将所有 top 和 left 值转换为 percent，并将 width 转换为 percent 。如果需要，设置其 bottom 属性以将其从底部对齐。

与第 1 列和第 2 列重叠的图像不应位于任何列中，而应位于 .container 或 .row 内，位置为 absolute.它的直接父级应该是相对位置。 您可以使用 left 作为 33% 并将 translateX 设置为 -50%。假设第 1 列和第 2 列宽度相同，则将其放在第 1 列和第 2 列之间。如果需要，设置其 bottom 属性以将其从底部对齐。

希望这是有道理的。

更新

为了让您更好地理解，请考虑这张图片

.container 有一个 margin 和一个 padding-bottom

.container 和 .column-3 将具有相对位置

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

我认为你应该 read more关于相对和绝对定位。