绝对 div 高度在相对 div 内被切断

Question

我无法正确显示我的一个绝对定位的div。除非我为父(相对(div 设置高度，否则它会被切断，我无法做到，因为我永远不会知道所需的高度。

我最初没有使用任何绝对定位，但commdiv 的内容包裹在avatardiv 下面，所以我认为绝对定位可以修复它，除了底部的文本被切断之外，它已经解决了。

这是结构，你可以看到这个小提琴中发生了什么。

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>

Answer 1

尝试使用此修改后的 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%;
}

Answer 2

您需要将.top和.comm包装在div中，并使用flex来实现它

body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin:20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
display: flex;
}
a.avatar {
margin-right: 10px;
}
a.avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.top {
width: 100%;
overflow: hidden;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
margin-top: 5px;
}
.right {
max-width: 88%;
}

<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="right">
	<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 </p>
</div>
</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="right">
	<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>

<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="right">
	<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</p>
</div>
</div>
</div>

在这里工作小提琴

Answer 3

只需修改您的p.comm选择器，如下所示：

p.comm {
display: block;
position: relative;
top: 10px;
padding-left: 60px;
}