我正在尝试设计一个包含两列内容的页面,div#left和div#right. (我知道这些不是正确的语义标识符,但它使解释更容易)两列的宽度是固定的. 期望的结果 – 宽视口 当视口太窄而无法
... . . 我正在尝试设计一个包含两列内容的页面,div#left和div#right. (我知道这些不是正确的语义标识符,但它使解释更容易)两列的宽度是固定的.
期望的结果 – 宽视口
当视口太窄而无法并排显示时,我希望#right堆叠在#left之上,如下所示：
期望的结果 – 狭窄的视口
我的第一个想法是简单地应用float：left到#left和float：right到#right,但这使得#right将自己附加到窗口的右侧(这毕竟是浮动的正确行为),留下一个空的空间.当浏览器窗口非常宽时,这也会在列之间留下很大的差距.
错误 – div#right与视口的左侧不齐平
将float：left应用于两个div将导致错误的一个在窗口太小时移动到底部.
错了 – div#right不在div#left之上
我可以用媒体查询做到这一点,但IE直到版本9才支持这些.源顺序不重要,但我需要一些在IE7中工作最少的东西.这可能不借助Javascript吗？
.解决方法
. 这让你非常接近(免责声明：我只在Chrome和Firefox中测试过),仅使用CSS：
<html><head><style type="text/css">div.main1{ width: 40%; min-width:200px; height: 400px; border: solid 1px black; display:inline-block;}div.main2{ width: 40%; min-width:200px; height: 400px; border: solid 1px black; float:left;}</style></head><body><div class="main1">right div</div><div class="main2">left div</div></body></html> 诀窍是内联块显示风格……其他人可能能够在此基础上做得更好,但我觉得它很接近.
Aerik
. . .. ...