在宽屏幕下，显示为：
有没有可能在宽度缩小后变为：
这个样子？最方便的实现方式是什么？
有没有可能在宽度缩小后变为：
这个样子？最方便的实现方式是什么？
This topic created in 4464 days ago, the information mentioned may be changed or developed.
 |
1
bzw875 Mar 26, 2014
用js吧，CSS我不知道怎么做到。
|
 |
2
learnshare Mar 26, 2014  1
查看一下源码就可以了吧。
具体实现的话，左右两块内容可以通过浮动实现，窄屏换行可以通过 MediaQuery + display（inline -> block） 实现 |
 |
4
andybest OP @learnshare 页面是我 PS 的，就是画个例子说明情况，实际没见过这样的动态页面
|
|
5
learnshare Mar 26, 2014
@andybest HTML+CSS 可以实现，不算太复杂，抽空我写写看
|
 |
6
sneezry Mar 26, 2014
media query
|
 |
7
NemoAlex Mar 26, 2014 1
两种方式：
优雅的方式是使用 CSS Media Query，不过低级浏览器会不支持 详见这里： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries JS 的话就不够优雅，不过胜在兼容性好 基本思路是在页面初始化和 resize 的时候检查一下页面宽度，根据不同条件给一个比较外层的元素一个 Class，例如在默认是窄的情况，宽的时候是 .wide 然后 CSS 里写 .wide xxx {} 来覆盖默认的样式就好了 |
 |
8
jsonline Mar 26, 2014 via Android
flexbox
|
 |
9
binux Mar 26, 2014
media query 可以做到啊
|
|
10
learnshare Mar 26, 2014
@NemoAlex 这个方法可以做出来
|
 |
11
Keinez Mar 26, 2014 via Android
media query，写两套css即可。
|
Select Language