与960gs相同的等高柱

我如何在960gs中给出相同的等高柱。我尝试过EqualHeights jQuery插件，但不起作用。我有这样的例如：与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>

这将是解决具有相等高度的列960gs。 Thanx。

来源

2011-12-21 Leoh

请先搜索，只发布问题，如果你找不到答案：http://stackoverflow.com/search?q=same+height+columns+960gs&submit=search – ptriek 2011-12-21 14:42:10

如果您想为此使用EqualHeights plugin，请确保您选择了在一次调用equalHeights()时应该均衡的所有内容。因此，而不是：

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

用途：

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

演示：http://jsfiddle.net/aJxNe/

有一定CSS的解决方案，如使用faux columns同等高度的问题，但我不熟悉960gs专。

来源

2011-12-21 14:56:56

简单的解决方案！它的作品完美....竖起大拇指！ Thanx Madmartigan – Leoh 2011-12-21 15:15:36

没问题，当你有机会时快速阅读这里：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work个人而言，我讨厌使用js进行布局但我已经使用了等高插件几次。 – 2011-12-21 15:18:26

与960gs相同的等高柱

回答

相关问题