jquery - 如何使用 CSS 展开 div 并向下/向上插入标题？

Question

以下是我的 html 页面的摘录。

<div id="main_container">
    <div id="sec_inform" >
      <h1 class='inf_head'>Some heading goes here</h1>
      <div class='inf_desc'>And here goes the description. Two Liner description actually. 
      </div>
    </div>
    <div id="sec_pic" >
      <img class='prd_logo' src="https://src.com/abc.png" />
    </div>
  </div>

造型后看起来不错。 (参见此处:http://jsbin.com/orucel/1)

现在，我想要的是如果 .inf_desc 包含大量文本，那么:

1. .inf_head 应该移动到顶部(如果你看到代码，我已经为 sec_inform 使用了 padding-top，所以它应该以某种方式将 padding-top 更改为 0 . [可能有一些其他属性做同样的事情] )
2. 另一个想要的东西，但并不重要，如果 .inf_desc 包含太多文本，那么 .inf_desc 应该增长并最终 #sec_inform 和#main_container 也应该增长。

我该怎么做？

如果确实需要 jQuery，那么我可以接受，但我更喜欢一些纯 CSS 解决方案。

Answer 1

jQuery .animate()方法会帮助你。