我正在尝试按照以下方式创建布局,其中问题的帮助文本在问题容器中垂直对齐.
我的问题是当帮助文本超出问题控件的高度时如何扩展父容器.按照:
我知道这是因为我使用绝对定位来垂直居中帮助文本,因此它不包含在父容器的流中.但是我不确定这个问题的最佳css解决方案.
position: absolute;
top: 50%;
transform: translateY(-50%);
我创建了以下小提琴来说明我现有的解决方案/问题:
对于这个问题的最佳结构,我将不胜感激.
最佳答案
好吧,你不能仅使用CSS扩展基于绝对定位的div的父容器.
如果您之前的问题是垂直居中,我会建议您采用不同的方法.您可以将容器转换为display:table元素,并将两者作为主要内容,并将工具提示作为display:table-cell.这样,您将能够以更加可靠的方式将其放置在右侧,垂直对齐将与vertical-align:middle一起使用.
这将使您的容器适合工具提示.另外,我添加了位置:相对;左:20像素;把它放错一点,就像在你的例子中一样……
.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;
}
原文地址:https://www.jb51.cc/html/426159.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。