0

以下是我的 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应该移到顶部（如果您看到代码，我已经使用了 padding-top sec_inform，所以它应该以某种方式将 padding-top 更改为 0 。[可能还有其他一些属性可以做同样的事情]）
  2. 另一个想要的东西，但不重要，如果.inf_desc包含太多的文本，那么.inf_desc应该增长，最终#sec_inform也#main_container应该增长。

我怎样才能做到这一点？

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

4

2 回答 2

0

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

于 2013-03-26T07:09:45.587 回答
0

您可以使用表格根据高度推送内容，但不推荐使用表格，但在这种情况下，我们可以在纯 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;
}
于 2013-03-26T08:43:20.643 回答