960gs和循环

Question

我正在为我的网页制作布局，并且我遇到了960gs的问题。

我使用了一个包含条目和侧栏的节标记。

添加新条目后，侧边栏会向下移动到最后一个条目。

应该如何看待：

外观如何：

<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？

Answer 1

再想一想，只需将{position:absolute;}添加到.container_24 .grid_5 {

即可

并且您的页面应该看起来符合要求

Answer 2

我找到了解决问题的另一种更好的方法。

我创建了一个旁边的块（就像它一样）和另一个用于文章的文章。所以要获得我只需要放置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>

这很简单：）