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'類嗎? –
帖子已更新 –