Блог

Главная - Вопросы по программированию - 960g и циклы

960g и циклы

#html #css #django #loops #960.gs

#HTML #css #django #циклы #960.gs

Вопрос:

Я работаю над макетом для своей веб-страницы, и у меня возникла проблема с 960gs.

Я использую тег section, который будет содержать записи и боковую панель.

Когда добавляется новая запись, боковая панель перемещается вниз к последней записи.

Как это должно выглядеть:

Как это выглядит:

 <section class="container_24">   
{% for n in publisher.object_list %}
<article class="grid_16" style="background: white; height: 100px;">Article</article>
{% endfor %} 
<div class="grid_5" style="background: white; height: 100px; background: red;"> Sidebar </div>

Записи нажимают на боковую панель, и я хочу этого избежать

Как это должно быть решено? Используя относительный контейнер на абсолютной боковой панели? Или это можно сделать с 960gs?

Комментарии:

1. Я настоятельно рекомендую вам предоставить больше контекста html / css или, что еще лучше, живой пример, чтобы мы могли правильно понять вас и соответствующим образом помочь

2. Хорошо, мне кажется, это простая ошибка позиционирования. Однако, чтобы дать вам точное исправление, можете ли вы предоставить нам исходный ‘html’ для приведенных выше примеров скриншотов?

3. Правильно выглядящий пример: <article class=»grid_16″ style=»background: white; height: 100px;»> 1-я статья</article> <div class=»grid_5″ style=»background: white; height: 100px; background: red;»> Боковая панель </div> {%для n в publisher.object_list %} <article class=»grid_16″ style=»background: white; height: 100px;»> Статья</article> { % конец для %} Неправильно выглядящий пример приведен в 1-м сообщении

Ответ №1:

С другой стороны, просто добавьте {position:absolute;} к .container_24 .grid_5 {

и ваша страница должна выглядеть так, как вы хотите

Комментарии:

1. Я думал об использовании относительного pos для родительского элемента и абсолютного для боковой панели. Но мне все еще интересно, будет ли решение моей проблемы возможно только с 960.gs :)?

2. Кстати, откуда вы это взяли? ‘{% для n в publisher.object_list %}’. Самый простой способ решить эту проблему так, как вы хотите, это опубликовать демонстрационную версию, чтобы я мог над ней поработать.

3. Вау, css-код 960 действительно выглядит как беспорядок. отредактировал мой ответ выше, взгляните

4. Нет проблем — не забудьте «проверить» ответ, хотя

Ответ №2:

Я нашел другой, лучший способ решения моей проблемы.

Я создал дополнительный блок (как это было) и другой div для статей, в которых я зациклил тег. Итак, чтобы получить эффект, который мне понадобился, расположите всего 2 блока (в стороне и div)

                 <aside class="grid_8 push_16">
                Sidebar
            </aside>
            <div class="grid_16 pull_8" style="">
                {% for n in publisher.object_list %}
                <article class="grid_16">
                    <div class="grid_4 alpha">
                        <div>{{n.date_added|date:"j E Y "}} r.</div>
                        <div>{{n.date_added|date:"Y "}} r.</div>
                        <div style="text-align: center;"><img src=""></div>


                    </div>
                    <div class="grid_12 omega">
                        <h2>{{n.title}}</h2>
                        <hr>
                        <div class="">
                            {{ n.text }}
                        </div>
                    </div>
                </article>
                {% endfor %}
            </div>

Это было так просто 🙂