根据窗口大小更改列数

是否可以使用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

来源

2012-09-19 gruber

你有JQuery作为标签，因为你可以使用脚本？ – thatidiotguy

谷歌css3媒体查询 – Johan

与媒体查询试试吧 - 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%; 
    } 
}

来源

2012-09-19 19:11:35

使用EMS是比px更好的选择：http：//blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ – cimmanon

@cimmanon这绝对正确，但这只是一个例子，因为OP在讨论*“x”*的宽度，而不是实数 –

我推荐使用'box-sizing：border-box;'并在此实例中将宽度设置为50％。 – Shmiddty

您可以使用媒体查询来完成此操作，媒体查询会根据屏幕大小提供不同的样式表。

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/

来源

2012-09-19 19:16:23

首先，你可以使用CSS3 column-count:属性。
在特殊的屏幕宽度条件下，通过JavaScript的帮助添加列类。

来源

2012-09-19 19:18:25 Htmllancer

根据窗口大小更改列数

回答

相关问题