與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相同的等高柱

回答

相關問題