Question

背景

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

我将两列（合并的）=设为100vw。每列定义为50%。

（我可以使用以下数学方法计算B列中地图的高度（在链接的Jfiddle中可以更清楚地看到）：图像为350x600px。如果350px = {{1 }}，然后50% =〜171％。600px，因此以下代码段应该给出正确的变换值：

171 / 2 = 85.5%）

客观

我希望将列高调整为最高元素的高度。最高的元素很可能总是位于B列中。我希望A列中的div位于页面的中间。但是，如果我应该更改顺序，并希望在A列中放置比B列更高的东西，那么进行回退是很不错的，这样B列中的元素将重新定位为垂直居中。（但我可以没有这种生活，并在需要时手动完成。）

问题

列高没有表现出来。即使A中的元素较短，A列的高度（以深绿色显示）也高于B列。

Jfiddle

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

（具有鲜艳的div颜色）

代码

css：

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

html：

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

Answer 1

您看过Flexbox吗？大大简化了这个旧的身高问题。

看这个小提琴：

http://jsfiddle.net/uy2pqbkL/

除了添加到.row类中的新属性以外，其他所有内容都相同。

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

Answer 2

首先，我绝对会建议您学习如何使用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

具有两列的Div包含不同高度的垂直居中的Div

2 个答案: