我对此并不陌生,目前我正在做一个项目,而且对此很执迷。我在主div内有3个div。而且我必须根据内容自动调整div的高度。有人可以为此建议解决方案吗?该代码是

<!DOCTYPE html>
<html>
<head>
<style>

#rcorners2 {
position: absolute;
border-radius: 25px;
border: 2px solid #d3dce2;
padding: 20px;
width: 722px;
height:450px;
left: 151px;
top: 64px;
}
#img {
position: absolute;
width: 266px;
height: 260px;
left: 32px;
top: 42px;
}
#desc {
position: absolute;
font-size: 16px;
padding: 5px 15px 5px 5px;
width: 373px;
left: 321px;
top: 42px;
height: 100%;
line-height:1.6;
}
.vr {
width: 2px;
background-color: #d3dce2;
position: absolute;
top: 5px;
bottom: 50px;
left: 310px;
height: 317px;
}
</style>
</head>
<body>


<p>Rounded corners for an element with a border:</p>
<div id="rcorners2">
<div id="img">
<img src="SLT-A99V_wSAL2470Z_lg.jpg" height="260px" width="265">
</div>
<div class="vr">&nbsp;</div>
<div id="desc">
Photography studio management software that helps grow your     business,   frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
 </div>
 </div>


 </body>
 </html>

最佳答案

您要根据内容调整的div,为此div使用CSS min-height

例:

.contentDiv{
  min-height:400px;
}


在你的情况下

<!DOCTYPE html>
<html>
<head>
<style>

#rcorners2 {
position: absolute;
border-radius: 25px;
border: 2px solid #d3dce2;
padding: 20px;
width: 722px;
min-height:450px;
left: 151px;
top: 64px;
}
#img {
position: absolute;
width: 266px;
height: 260px;
left: 32px;
top: 42px;
}
#desc {
font-size: 16px;
padding: 5px 15px 5px 5px;
width: 373px;
height: 100%;
line-height: 1.6;
margin-left: 321px;
}
.vr {
width: 2px;
background-color: #d3dce2;
position: absolute;
top: 5px;
bottom: 50px;
left: 310px;
height: 317px;
}
</style>
</head>
<body>


<p>Rounded corners for an element with a border:</p>
<div id="rcorners2">
<div id="img">
<img src="SLT-A99V_wSAL2470Z_lg.jpg" height="260px" width="265">
</div>
<div class="vr">&nbsp;</div>
<div id="desc">
Photography studio management software that helps grow your     business,   frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
 business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar. Photography studio management software that helps grow your business, frees up your time, automatically keeps in touch with your clients and makes sure all your jobs stay on track! Studio Ninja reminds you when tasks are due and keeps all your jobs on track and consistent. Just set it up once and never forget a thing again. Check out which jobs are coming up from one convenient location or easily integrate it with Google Calendar or iCalendar.
 </div>
 </div>


 </body>
 </html>


将height替换为min-height,因为通过使用height属性,您告诉浏览器将div限制为该特定高度,而不是超出该范围。因此,将其替换为最小高度属性将使您的div可以灵活地根据其内容进行设置。

有了这个,您的div始终将始终具有450px的最小高度,并将根据您放入其中的内容来扩展其高度。

我希望它能为您完成工作。如果没有,请发表评论。

关于html - 如何根据内容调整div的高度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32815674/

10-12 12:58
查看更多