如何根据内容调整div的高度?

时间:2013-12-04 18:53:31

标签: jquery html css

我有类似以下的内容

 <div class='texts-container'>
               <div class='texts-title'>Text title</div>
               <div class='texts'><p>some texts here. Dynamically generate.</p></div>
  </div>

CSS

.texts-container{
width: 650px;
height: 120px;
margin: 18px;
}

.texts-title{
   float: left;
   padding: 10px;
   background-color: #ECECEC;
   height: 80px;
   width: 130px;
   line-height: 80px;
   text-align: center;
   vertical-align: middle;
}

.texts{
   background-color: #E2E2E2;
   float: left;
   padding: 5px;
   height: 90px;
   width: 430px;
}

电流:

  --------------------------
| siojfisojfosjfiosjfsif     |
|jfisofjiosfjjsfjifosfjoisjf |
  --------------------------
 kfosdfkpsdkfsfp fkopsf
 kopfkpsf fkopsfpsdk

期望的结果

  ---------------------------
| siojfisojfosjfiosjfsif     |
|jfisofjiosfjjsfjifosfjoisjf |
| kfosdfkpsdkfsfp fko        |
| kopfkpsf fkopsfpsdk        |
  ---------------------------

我的问题是如果我的。texts div高度自动调整,如果我在该div中有很多文本。

我不想将text div的高度设置得很高,因为我的大部分内容都很短。但是,我确实想在有大量内容时自动调整高度。任何人都可以给我一个提示吗?谢谢!

1 个答案:

答案 0 :(得分:3)

设置min-height,但不是height,如下所示:

text-container{
    margin:18px;
    min-height:120px;
}