колонки одинаковой высоты с 960gs - PullRequest
Новая
       39

колонки одинаковой высоты с 960gs

2 голосов
/ 21 декабря 2011

как мне дать одинаковые столбцы одинаковой высоты в 960gs. Я пытался с плагином EqualHeights jQuery, но не работает. У меня это например: 

<!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.

1 Ответ

0 голосов
/ 21 декабря 2011

Если вы хотите использовать для этого плагин EqualHeights , убедитесь, что вы выбрали все, что должно быть выровнено за один вызов, до equalHeights(). Так что вместо: 

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

Использование: 

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

Демо: http://jsfiddle.net/aJxNe/

Конечно, есть CSS-решения для проблемы равной высоты, например, использование искусственных столбцов , но я не знаком с 960gs специально.

...