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是否包含大量文本：

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

我该怎么做？

如果需要jQuery那么我就可以了，但我更喜欢一些CSS解决方案。

Answer 1

jQuery .animate()方法可以帮助您。

Answer 2

你可以根据高度使用表来推送内容，但是不建议使用表但是在这种情况下我们可以在纯CSS和一些HTML标签中实现这一点而不是jquery，如果任何人都可以实现这个纯DIV它将是有兴趣看。

http://jsbin.com/orucel/4/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body id='jsbinBody'>

  <div id="main_container">
    <div id="sec_inform" >
      <table valign="middle" height="100%">
        <tr>
          <td valign="middle" height="100%">
            <div>
              <h1 class='inf_head'>Some heading goes here</h1>
              <div class='inf_desc'>And here goes the description. Two Liner description actually.
                Use this text indeed. 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales, nibh sit amet bibendum consectetur, elit sem laoreet erat, interdum tempor arcu augue nec ligula. Mauris eget leo mi, a consectetur metus. Cras sagittis ultricies ipsum feugiat tincidunt. Aenean augue dolor, porta at facilisis non, sollicitudin vitae justo. Quisque nec tristique mauris. Praesent a ultricies lacus. Duis pretium mi neque. Aenean quis orci sed dolor pulvinar lacinia in id risus. Sed arcu neque, ultrices non viverra et, tincidunt ut lacus. Vestibulum porttitor elementum consequat. Curabitur ac ante orci.
              </div>
            </div>
          </td>        
        </tr>
      </table>

    </div>
    <div id="sec_pic" >
      <img class='prd_logo' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSVYSnOi8NlsD7QNJoz2Do1Lcm8qoiCH3I-EWkEuVgg_sypqpjQ8Q" />
    </div>
  </div>


</body>
</html>

CSS：

div {
   border: 1px dashed red;  
}

#main_container{
  height: 500px;
  width:800px;
}

#sec_inform{
  border-color: green;
  height: 86%;
  width: 50%;
  margin: 0px 30px;
  display: inline-block;
  float: left; 
  box-sizing: border-box;
  padding-top: 0px;
}


#sec_pic{
  border-color: blue;

  float: right;
  height: 86%;
  width: 38%;
  margin: 30px 30px 30px 0px;
}

.prd_logo{
   display: block;
   margin: 50% auto;
}


.inf_desc{
   font-size: 16px;
   color: #666;
}

h1 {
  font-size: 30px;
  color: #333;
  margin:0px;
}

#jsbinBody{
  font-family: Lucida grande;
}

如何扩展div并使用CSS向下/向上推动标题？

2 个答案: