Question

是否可以仅使用CSS更改布局，因此当窗口大小＆lt; x然后我在一列上的文字宽度为100％，当窗口＆gt; = 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

尝试使用媒体查询 - DEMO

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

首先，您可以使用CSS3 column-count:属性并在特殊屏幕宽度条件下使用JavaScript添加列类。

根据窗口大小更改列数

3 个答案: