请在HTML/CSS/Django的一个div行崩溃

Question

我最近设计了一个非常小的Django的模板看起来像这样：

HTML代码如下所示：

{% for category in categories %} 
    <div class="row"> 
     <div class="column"> 
     <h3>{{ category }}</h3> 
     <ul> 
      {% for elem in elems %} 
      <li><a href=...>{{ elem }}</a></li> 
      {% endfor %} 
     </ul> 
     </div> 
    </div> 
    {% endfor %} 

和CSS代码：

.row:before, 
.row:after { 
    content: " "; 
    display: table; 
}  

.row:after { 
    clear: both; 
} 

.column{ 
    width: 50%; 
} 

我想有行折叠如果有足够的空间。 在我的示例中，我希望测试列仅位于Pet之后（仅由填充分隔）。 有没有可以帮助我实现这一目标的CSS属性？还是应该改变我的方法？

谢谢！

Answer 1

divs没有定义的宽度。他们将占用整个页面，使得没有剩余的水平空间。你需要的是一个响应式设计，根据盒子的大小和屏幕的大小来改变宽度。

使用@media选择器来限制特定的风格，以当前浏览器窗口的大小，将允许的div的大小，你的愿望作出回应：

@media screen and (max-width : 600px) { 
    .box { 
     width: 50%; 

    } 
} 
@media screen and (min-width : 601px) { 
    .box { 
     width: 33.3%; 
    } 
} 

JS Fiddle

希望帮助！

编辑：读过你的评论我现在明白你的意思了。说崩溃混淆了我，我认为你是在寻求一些动态的东西。

解决此问题的最佳方法是优先考虑行的列。这不是真正的表格，所以它们甚至不是完全一致的行。

<div class="column"> 
    <div class="row"> 
     <h3>Drinks</h3> 
     <ul><li>item 1</li><li>item 2</li></ul> 
    </div> 
    <div class="row"> 
     <h3>Food</h3> 
     <ul><li>item 1</li><li>item 2</li></ul> 
    </div> 
</div> 
<div class="column"> 
    <div class="row"> 
     <h3>Pet</h3> 
     <ul><li>item 1</li></ul> 
    </div> 
    <div class="row"> 
     <h3>Test</h3> 
     <ul><li>item 1</li><li>item 2</li></ul> 
    </div> 
</div> 

使用以下CSS将会给出所需的结果。

.column { 
    width:50%; 
    float:left; 
} 

使用你的代码，这将等同于：

{% for category in categories %} 
    <div class="column"> 
     <div class="row"> 
      <h3>{{ category }}</h3> 
      <ul> {% for elem in elems %}<li><a href=...> {{ elem }}</a></li>{% endfor %}</ul> 
     </div> 
    </div> 
{% endfor %} 

这个答案已经变得很长，我道歉！

New JS FIddle