子元素的垂直对齐，可以扩展父容器的大小

Question

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

我的问题是当帮助文本超出问题控件的高度时如何扩展父容器。 按照：

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

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

我创建了以下小提琴来说明我现有的解决方案/问题：

的jsfiddle

对于这个问题的最佳结构，我将不胜感激。

Answer 1

好吧，你不能仅使用CSS扩展基于绝对定位的div的父容器。

如果您之前的问题是垂直居中，我会建议您采用不同的方法。 您可以将容器转换为display: table元素，并将两者作为主要内容，并将工具提示作为display: table-cell 。 这样，您将能够以更加可靠的方式将其放置在右侧，垂直对齐将与vertical-align: middle 。

这将使您的容器适合工具提示。 另外，我添加了position:relative; left:20px; 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>