两列包含不同高度的垂直居中 div 的 div

Question

背景

我有一个包含两列的 div。在 A 列中，将有一个带有“关于我”部分的 div。这是高度 X。在 B 列中将是地图的另一个图像。这是高度 Y。X 不等于 Y。

我正在制作两列（合并）=100vw。每列定义为50%。

（我可以使用以下数学计算 B 列中地图的高度（在链接的 Jfiddle 中可以更清楚地看到）：图像是 350x600px。如果 350px = 50%，则 @987654328 @ = ~171%.171 / 2 = 85.5% 所以下面的代码 sn -p 应该给出正确的变换值：

margin-top: 85.5%; transform: translateY(-50%);)

目标

我希望将列高调整为最高元素的高度。最高的元素很可能总是在 B 列中。我希望 A 列中的 div 位于页面的中间位置。但是，如果我应该更改顺序并希望在 A 列中放置比在 B 列中更高的东西，那么有一个后备方法会非常好，以便 B 列中的元素重新定位以使其垂直居中。 （但我可以不用它，如果需要，我可以手动完成。）

问题

• 列高不正常。 A 列的高度（以深绿色显示）高于 B 列的高度，尽管 A 中的元素较短。

Jfiddle

http://jsfiddle.net/ubjo1s3y/28/

（带有漂亮明亮的 div 颜色）

代码

css:

.column {
    margin: -5px 0px 30px 0px;
    float: left;
    width: 50%;
  height: auto;
    background-color: green;
}

.row:after {
    background-color: pink;
    content: "";
    display: table;
    clear: both;
    height: 0;
}

#aboutmecontainer {
    background-color: aqua;
    width: 90%;
    float: left;
    padding: 0px 5% 0px 5%;
    margin-top: 85.5%;
    transform: translateY(-50%);
}

#facephoto {
    background-color: red;
    float: left;
    width: 130px;
    margin: 0px 0px 10px 50%;
    transform: translateX(-50%);
}

#aboutmetext {
    background-color: yellow;
    float: left;
    width: 100%;
    height: auto;
}

#map {
    background-color: yellowgreen;
    float: left;
    width: 90%;
    padding: 0px 5% 0px 5%;
}

html:

<div class="row">
    <div class="column">
        <!-- container for round face photo -->
        <div id="aboutmecontainer">
            <div id="facephoto">
                <!-- photo -->
                <img src="http://via.placeholder.com/200x200" alt="Face" style="height: 100%; width: 100%; object-fit: contain;" />
            </div>
            <!-- container for text underneath face photo -->
            <div id="aboutmetext"><h3 style="color: #000000;">About Me</h3><p></p><h5 style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
            </div>
        </div>
    </div>
    <div class="column">
        <!-- div for map to right of "about me" section -->
        <div id="map">
            <!-- map picture can be edited in photoshop to add new countries -->
            <img src="http://via.placeholder.com/350x600" alt="Map" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
    </div>
</div>

Answer 1

首先，我绝对推荐学习如何使用 flexbox。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox.

此外，在这种情况下使用浮点数会破坏 dom 的流程。在某些情况下使用浮点数可以工作，但它会从 dom 的常规流中删除目标元素，如果你不知道如何使用浮点数，总是会让你感到悲伤。 这是一个不使用 flex 的修改后的 jsfiddle。您想将.column 的显示设置为inline-block 并将font-size: 0 放在.row 上（删除空白）。并移除所有的花车。 JSFiddle

Answer 2

你看过Flexbox吗？它极大地简化了这个旧的高度问题。

看这个小提琴：

http://jsfiddle.net/uy2pqbkL/

除了添加到 .row 类的新属性之外，其他一切都相同。

.row {
  display:flex;
  align-items:center;
}