2
我正在创建一个移动应用程序,用户将内容发布到Feed。对于每个帖子都有一个单独的div区域,他可以添加内容和图片。问题是,当我在同一个div中粘贴一个虚拟文本和一张照片时,高度已关闭并且不会自行调整。如何在添加内容时自动调整div高度?
这里的灰色背景区是什么样子,现在,当我将高度设置为自动。注意灰色背景区域被缩短。
的目标是在div区域自动调整到高度,无论用户添加的内容。我试过height:auto
,height:auto !important
,height: 100%
,height:100 !important
和overflow:hidden
。这些都没有给我我想要的结果。使灰色背景区域自动覆盖所有内容的最佳方法是什么?我会接受使用JavaScript或jQuery来做到这一点的答案。
HTML
<!-- Feed Begins -->
<section class="feed section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="FalconsFan1 text-center">
<p>FalconsFan1</p>
</div>
<div class="-posts text-center">
<p>497 posts</p>
</div>
<!-- Posts -->
<div class="container Second-Post">
<div class="row">
<div class="col-sm-12">
<img src="img/bitmap_2.jpg" alt="" class="post-avatar">
<h4 class='post-username'>FalconFans1</h4>
<small class="post-timestamp">32 seconds ago</small>
<p class='post-content'>Julio is the best receiver in the game right now!</p>
<img src="img/post-img.jpg" alt="" class="post-img">
<ul class="polling-icons text-center">
<li><img src="img/green-like-button.png" alt=""></li>
<li><img src="img/grey-dislike-button.png" alt=""></li>
<li><img src="img/grey-comment-button.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- Posts -->
</div>
</div>
</div>
</section>
CSS
.feed {
margin-top: -50% !important;
}
.FalconsFan1 {
/* width: 392px;
height: 78px; */
font-size: 64px;
letter-spacing: 0.7px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.-posts {
/* width: 208px;
height: 49px; */
font-size: 40px;
letter-spacing: 0.5px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.Second-Post {
object-fit: contain;
background-color: #f8f8f8;
height: auto;
width: 988px !important;
}
.Second-Post::after {
content: " ";
display: block;
clear: both;
}
.post-avatar {
position: absolute;
margin-top: 1%;
left: 5%;
width: 86px;
height: 88px;
}
.post-username {
position: absolute;
left: 20%;
font-size: 42px;
}
.post-timestamp {
position: absolute;
margin-top: 6%;
left: 20.5%;
}
.post-content {
position: absolute;
margin-top: 10%;
left: 20.5%;
width: 754px;
height: 70px;
font-size: 27px;
letter-spacing: 0.8px;
color: #3f3f3f;
}
.post-img {
position: absolute;
margin-top: 17%;
left: 20.5%;
width: 779px;
height: 588px;
}
.polling-icons {
list-style: none;
position: absolute;
margin-top: 80%;
left: 10%;
}
.polling-icons li {
padding: 0;
display: inline !important;
padding: 130px;
}
您的问题并不需要JS要解决它一定是有绝对位置或浮动,使你的IMG出流文件的....也许你可以向我们展示了IMG的风格? 'class =“post-img”'? – DaniP
你可以添加你的css for'post-img'类吗? –
帖子已更新 –