2011-12-21 11 views
2

どのように私は960gsで同じ等高線を与えるのですか?私はEqualHeights jQuery Pluginを試しましたが、動かないのです。 Iは、例えば、これを持っている:溶液は960gsに等しい高さのカラムを持っているだろう960gsと同じ高さの列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Javascript</title> 

<link rel="stylesheet" href="960/960.css" /> 
<link rel="stylesheet" href="960/reset.css" /> 
<link rel="stylesheet" href="960/text.css" /> 
<link rel="stylesheet" href="css/default.css" /> 
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script> 
<script> 
$(document).ready(function() { 
    $("#block1").equalHeights(500); 
    $("#block2").equalHeights(500); 
}); 
</script> 
</head> 

<body> 

<div class="container_12" id="header"> 
    <div class="grid_3" id="logo"> 
     <h1>Header</h1> 
    </div> 
</div> 

<div class="container_12" id="content"> 
    <div class="grid_3" id="block1"> 
     <h1>SideBar</h1> 
     <ul> 
      <li><a href="#">enlace1</a></li> 
      <li><a href="#">enlace2</a></li> 
      <li><a href="#">enlace3</a></li> 
     </ul> 

    </div> 
    <div class="grid_9" id="block2"> 
     <h1>Título 1000</h1> 
     <p> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     <h2>Título 2</h2> 
     <p> 
      Suspendisse venenatis sodales nisl, et cursus magna gravida eget. Pellentesque venenatis condimentum arcu sed mollis. Nunc tortor magna, imperdiet mattis placerat in, ornare sodales erat. Cras felis turpis, feugiat quis suscipit sit amet, cursus sit amet urna. Suspendisse a aliquet nisi. Duis a mauris sit amet tortor venenatis auctor nec sed lorem. Phasellus sit amet sapien magna. Duis ut tellus nisi. Integer eu est vitae lectus scelerisque mattis. Nulla adipiscing auctor quam. Integer lacus leo, scelerisque vestibulum placerat id, tempor vel ante. Donec volutpat ultricies magna, sed egestas tortor ultricies vitae. Duis tincidunt malesuada leo quis ullamcorper. 
     </p> 
     <h2>Título 3</h2> 
     <p> 
      Aenean luctus, arcu sed pellentesque sollicitudin, diam neque lacinia leo, eu volutpat massa urna et est. Morbi tincidunt ornare orci vel semper. Nunc quis risus quam, luctus malesuada sem. Cras varius, lorem quis dapibus volutpat, odio urna elementum velit, eget lacinia turpis urna condimentum sapien. Curabitur mattis odio bibendum urna hendrerit commodo. Etiam posuere molestie malesuada. Nulla sit amet nisi turpis. Aenean sit amet risus malesuada felis congue interdum non eget erat. Vestibulum purus purus, venenatis sit amet rutrum eget, pretium id lacus. Fusce eleifend, ligula in posuere molestie, libero nisi hendrerit elit, eget sagittis augue libero in est. Sed viverra nibh eget leo lobortis lobortis. Etiam id libero lectus. Sed vel diam id ipsum iaculis faucibus eu non sapien. Vivamus consectetur nisi lectus, vel ornare enim. Nullam ut viverra dolor. 
     </p> 
     <h2>Título 4</h2> 
     <p> 
      Quisque bibendum, purus sed consequat feugiat, elit orci bibendum odio, quis tincidunt dui ligula ut nibh. Vestibulum posuere est id urna hendrerit porta. Praesent nec hendrerit mauris. Aliquam et dui et eros venenatis egestas id et magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras faucibus, justo id rutrum elementum, odio dui viverra felis, molestie commodo urna massa eu mi. Cras vitae est justo. Pellentesque congue nisl erat. Proin vitae orci sit amet mi vehicula rhoncus ut ac sem. Cras suscipit arcu ut turpis porttitor elementum. 
     </p> 
     <h2>Título 5</h2> 
     <p> 
      Morbi magna nunc, lacinia quis vestibulum sit amet, scelerisque eget dui. Vestibulum eu dui tellus. Integer vitae fermentum quam. Nulla ut neque tortor, vitae bibendum elit. Morbi mi orci, fermentum a tincidunt a, lacinia ut quam. Sed magna tortor, tristique at bibendum gravida, vulputate a nunc. Aliquam sit amet dapibus odio. Mauris posuere lectus nec ipsum accumsan interdum. Nunc rhoncus imperdiet tortor in porta. Suspendisse in lorem non arcu luctus commodo at eget dui. Suspendisse cursus posuere enim, ac porta libero dignissim a. Proin sit amet elit nec turpis malesuada cursus eget at est. Sed at mauris risus, a commodo dolor. Praesent tristique imperdiet hendrerit. 
     </p> 
    </div> 
</div> 
<div class="clear"></div> 
<div class="container_12" id="footer"> 
     <div class="grid_2 prefix_10" id="foot"> 
       <h1>FOOTER</h1> 
     </div><!--grid_3--> 
</div><!--container_12--> 
</body> 
</html> 

。 Thanx。

+0

答えを見つけることができない場合は、まず質問を投稿してください:http://stackoverflow.com/search?q=same+height+columns+960gs&submit=search – ptriek

答えて

0

これにEqualHeights pluginを使用する場合は、equalHeights()への1回の呼び出しで、均等化する必要があるすべてのものを選択してください。だから、代わりに:

$("#block1").equalHeights(500); 
$("#block2").equalHeights(500); 

用途:

$("#block1, #block2").equalHeights(500); 

デモ:faux columnsを使用してのように同じ高さの問題にCSSのソリューションは、確実にhttp://jsfiddle.net/aJxNe/

ありますが、私は特に960gsに精通していませんよ。

+0

簡単な解決策!それは完璧に動作します.... Thanx Madmartigan – Leoh

+0

いいえ、チャンスを得たときにここで簡単にお読みください:http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work個人的に、私はレイアウトのためにjsを使うことが嫌い私はequalHeightsプラグインを数回使用しました。 –

関連する問題