html - 可以扩展父容器尺寸的子元素垂直对齐方式

Question

我正在尝试按照以下方式创建布局，其中问题的帮助文本在问题容器内垂直对齐。

我的问题是当帮助文本超过问题控件的高度时如何展开父容器。根据:

我知道这是因为我使用绝对定位来垂直居中帮助文本，因此它不包含在父容器的流中。但是我不确定这个问题的最佳 css 解决方案。

position: absolute;
top: 50%;
transform: translateY(-50%);

我创建了以下 fiddle 来说明我现有的解决方案/问题:

jsfiddle

我将不胜感激关于此问题的最佳结构的任何建议。

Answer 1

嗯，你不能只用 CSS 来扩展基于绝对定位的 div 的父容器。

如果您之前的问题是垂直居中，我建议您采用不同的方法。您可以将容器变成 display: table 元素，并使主要内容和工具提示充当 display: table-cell。这样，您将能够以更稳固的方式将其放置在右侧，并且垂直对齐将适用于 vertical-align: middle。

这将使您的容器适合工具提示。另外，我添加了 position:relative; left:20px; 将其错位到右侧，就像在您的示例中一样...

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

.container {
    position: relative;
    border: 1px #000 solid;
    display: table;
    margin-bottom: 50px;
}

.content, .text {
    display: table-cell;
    vertical-align: middle;
}

.text {    
    width: 22.5%;
}

.text > div {
    background-color: #ccc;
    margin: 5px;
    padding: 10px;
    position: relative;
    left: 20px;
}

<div class="container cf">
    <div class="content">
        This is the form content
    </div>
    <div class="text">
        <div>Some text that is smaller than the control height</div>
    </div>
</div>

<div class="container cf">
    <div class="content">
        This is the form content
    </div>
    <div class="text">
        <div>Some text that is bigger than the control height, some text that is bigger than the control height, some text that is bigger than the control height.
        </div>
    </div>
</div>