我正在试验 css3 媒体查询,我正在尝试创建两种不同的布局,一种用于小屏幕(手机、平板电脑),另一种用于大屏幕。布局应包括三个主要 div (a、b、c)。
<div class="wrapper">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
小屏幕的顶部有 div#a
,另外两个 div div#b, div#c
放置在第一个 div 下方 50%-50% 的位置,见图:
较大的屏幕应将所有 div 排成一行,请参见图片:
这是我到目前为止设法做到的,但没有按预期工作..
最佳答案
这将是基本的想法。包括样式以方便在盒子上填充。
http://fiddle.jshell.net/E4jjt/14/
http://fiddle.jshell.net/E4jjt/14/show/
* {
/* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
content: " ";
display: table;
}
.wrapper:after {
clear: both;
}
.wrapper > div {
min-height:200px;
width:33.333333%;
float: left;
padding: 15px;
position: relative;
/* extra cosmetics */
color: #fff;
text-align: center;
font: 1.5em Georgia;
}
#a {
background-color: #252525;
}
#b {
background-color:#ACACAC;
}
#c {
background-color:#F4CF40;
}
@media all and (max-width: 800px) {
#a {
width: 100%;
}
#b, #c {width: 50%;}
#b {
clear: left;
}
}
关于html - CSS3 媒体查询 - 两种布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22577982/