如何使div高度动态,以便在插入的数据超过div的大小时自动增加高度?
<div class="group"style="background:white;box-shadow: 3px 3px 3px #DDDADA;">
<div class="cadetabox" id="s10">
<div class="capht"><img src="images/user_picture.jpg" width="50" height="50"/></div>
<div class="caphtdtail">
<a href="CADetail.php"><h4>CA Ritesh </h4></a>
<p> learn how to setup video calls learn how to setup video calls learn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video calls Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai </p>
<p>2 yrs Experience</p>
<p style="color: green;">Open Today</p>
</div>
<a href="login-register.php"><span class="likespan"><i class="fa fa-thumbs-o-up" style="font-size: 18px;"></i> 0</span></a>
<a href="#"><span class="span" data-toggle="modal" data-target="#myModal">Call</span></a>
<div class="clearfix"></div>
</div>
</div>
答案 0 :(得分:0)
您需要使用CSS height
属性来使div高度动态化。
使用height:auto;
Example
以下是您的代码示例。
.caphtdtail {
border: 2px solid;
height: auto;
}
&#13;
<div class="group" style="background:white;box-shadow: 3px 3px 3px #DDDADA;">
<div class="cadetabox" id="s10">
<div class="capht">
<img src="images/user_picture.jpg" width="50" height="50" />
</div>
<div class="caphtdtail">
<a href="CADetail.php"><h4>CA Ritesh </h4></a>
<p>learn how to setup video calls learn how to setup video calls learn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video callslearn how to setup video calls Kandivali,
Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai Kandivali, Mumbai</p>
<p>2 yrs Experience</p>
<p style="color: green;">Open Today</p>
</div>
<a href="login-register.php"><span class="likespan"><i class="fa fa-thumbs-o-up" style="font-size: 18px;"></i> 0</span></a>
<a href="#"><span class="span" data-toggle="modal" data-target="#myModal">Call</span></a>
<div class="clearfix"></div>
</div>
</div>
&#13;