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

テーブルを使用して高さに応じてコンテンツをプッシュできますが、テーブルは推奨されませんが、この状況では、jquery を配置する代わりに、純粋な CSS といくつかの HTML タグでこれを実現できます。誰かがこの純粋な 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 に答える