Плавная сетка jQuery

Я использую http://phase-change.org/jquery.gridlayout для создания гибкого макета. из нескольких div в моем макете.

Мне нужно сохранить div справа, который содержит мое главное меню, остальное - это просто div контента.

Я не могу понять, как поддерживать меню справа, не перемещая его или не заставляя элементы сетки уважать меню и переставлять их из-за его ширины, они просто перекрываются.

Мой код следующий:

HTML:

<div id="menu">
</div>

<div id="content">



<div class="block">
<p>1</p>
</div>

<div class="block">
<p>2</p>
<p>2</p>
</div>

<div class="block">
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
</div>

<div class="block">
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
</div>

<div class="block">
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</div>

<div class="block">
<p>6</p>
<p>6</p>
<p>6</p>
<p>6</p>
</div>

</div>

CSS:

#content.hasLayout {

position:relative;
margin-left:30px;

}

#block {

width:214px;
background-color:#CF0;
margin:30px 0 10px 0;

}

 #menu {
width:180px;
height:700px;
background-color:#669;
float:right;


 }

Мой JavaScript между ‹ head > и ‹ /head >:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery_Plug_ins/jquery.gridlayout.js"></script>

<script type="text/javascript">             

$(document).ready(function(){


 $('#content').addClass('hasLayout').gridLayout('div.block' , { col_widht:250, min_cols: 3 } );
                       });
</script>

Я не очень хорошо разбираюсь в сценариях Java, и я действительно не знаю, даже нужно ли начинать искать, как это реализовать таким образом.

Спасибо.


layout css fluid grid
person Marvin    schedule 21.08.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы не разбираетесь в Javascript, вам, вероятно, не следует использовать Javascript для оформления своего сайта. Прочтите оригинальное руководство по гибкой CSS-сетке, чтобы узнать, как создать плавную сетку без Javascript и jQuery. .

person Evan Kroske    schedule 21.08.2009
comment
Спасибо за ваш ответ, я намеревался использовать только css и html, но я не мог сделать макет div таким же, как с подключаемым модулем jQuery. Я имею в виду, что они не будут опускаться ниже друг друга, поскольку размер окна был изменен, и я не мог добиться стандартный вертикальный зазор между ними. Я уже видел и читал эту статью, которая действительно очень хороша. Спасибо - person Marvin; 21.08.2009

arrow_upward
0
arrow_downward

Во-первых, Пол заслуживает моей благодарности за свою небольшую, но не менее важную правку, которая натолкнула меня на мысль, что он просто изменил один из тегов с jQuery на CSS.

Подумав над этим вопросом, я понял несколько вещей:

  1. Плагин jQuery настраивается в соответствии с размером окна

  2. Гибкие макеты — это не торт! :п

  3. Раньше я делал левое поле, чтобы у div было поле слева.

Я вернулся к своему css и определил в:

#content.hasLayout {

position:relative;
margin-left:30px;
**margin-right:180px;**   <------- Added this
}

Теперь мои плавные div ведут себя и не позволяют меню перекрываться не потому, что меню «физически» приближается к ним, а скорее к краю окна браузера.

Я не думаю об этом как о лучшем решении, но оно работает.

person Marvin    schedule 21.08.2009