javascript - 根据窗口大小更改列数

Question

是否可以仅使用 CSS 更改布局，所以当窗口大小 < x 时，我将文本放在宽度为 100% 的一列上，当窗口 >= x 时，将其设置为两列，每个宽度设置为 50%？

例如：

一栏：

first part of the example text
second part of the example text

两列：

first part of the                 second part of the
example text                       example text

Answer 1

尝试使用媒体查询 -演示

div {
    border: 1px solid #c00;
}

@media only screen and (min-width: 481px) {
    div { 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        width: 50%; 
    }
}​

Answer 2

您可以使用媒体查询来做到这一点，这将根据屏幕大小提供不同的样式表。

HTML：

<div class="col1">Lorem ipsum  ... interdum mi.</div>
<div class='col2'>Integer varius,  ... sagittis dolor.</div>​

CSS：

@media (max-width: 500px) {
    .col1, .col2 { width: 45%; float: left}
}

http://jsfiddle.net/FKSkv/1/

Answer 3

首先你可以使用 CSS3column-count:属性。
并在您的特殊屏幕宽度条件下借助 JavaScript 添加列类。