html - 绝对 div 高度在相对 div 内被截断
问题描述
我无法让我的绝对定位的 div 之一正确显示。除非我为父(相对)div 设置一个我不能做的高度,否则它会被切断,因为我永远不会知道所需的高度。
我最初没有使用任何绝对定位,但是 div 的内容comm
被包裹在 div 下方,avatar
所以我认为绝对定位可以解决它,它已经解决了,除了底部的文本被切断。
这是结构,你可以看到这个 fiddle发生了什么。
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: block;
overflow: hidden;
position: absolute;
left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
display: block;
position: absolute;
left: 70px;
top: 20px;
height: 100%;
}
<div class="main">
<div class="wrap">
<a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
<div class="top">
<a href="https://example.com" class="name">John Doe</a>
<div class="posted">8 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet.
</p>
</div>
<div class="wrap">
<a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
<div class="top">
<a href="https://example.com" class="name">Jane Doe</a>
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="wrap">
<a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
<div class="top">
<a href="https://example.com" class="name">Jimmy Doe</a>
<div class="posted">18 mins ago</div>
</div>
<p class="comm">Ut enim ad minim veniam.
</p>
</div>
</div>
解决方案
尝试使用此修改后的 css 代码。
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: flex;
margin-left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
}
p.comm {
display: block;
margin-left: 70px;
height: 100%;
}
推荐阅读
- c++ - CreateProcessA() 在 C++ 中使用 cmd 输出以管理员身份运行
- python - Python Json 微笑序列化包
- python - 使用 BeautifulSoup 提取元素中的文本
- sql-server - SQL Server 错误:字符串或二进制文件将被截断。(系统.数据)
- node.js - 我的快递服务器收到很多获取请求
- javascript - 这段代码发生了什么?我不明白这是如何工作的,有人可以帮我完成这个吗
- spring - “com.microsoft.azure”和“com.azure”有什么区别?
- angular - 将 d3 更新到 v6.3.1 和 Angular 到 v11.0.6:错误 - 在 d3 中找不到事件
- android - 如何在 Android 中运行 TypeScript 程序?
- r - 使用 R,我如何执行 bonferroni 类型测试来确定执行卡方检验后哪些区域的冠状病毒病例移动超出预期