[英]Responsive css tiles stack in pyramid shape
I have a row of 3 inline-blocks the span the width of the page horizontally: 我有一排3个内联块,横跨页面的宽度:
When the page reaches 1000px wide I want the tiles to stack themselves as a pyramid: 当页面达到1000px宽时,我希望瓷砖将自己堆叠为金字塔:
And then at 460px they need to stack vertically: 然后在460px他们需要垂直堆叠:
My current html/css structure is: 我目前的html / css结构是:
<div class='tile-row'>
<div class='tile'></div>
<div class='tile'></div>
<div class='tile'></div>
</div>
.tile-row{
margin: 0 auto;
max-width:1485px;
}
.tile{
width:32%;
display: inline-block;
height: 200px;
}
How would I set up media queries to accomplish the above scenarios? 如何设置媒体查询以完成上述方案? Is there an easier way to do this without using media queries? 没有使用媒体查询,有没有更简单的方法来做到这一点?
Fiddle: http://jsfiddle.net/C2pjx/
.tile-row{
margin: 0 auto;
}
.tile{
width:32%;
float: left;
height: 100px;
background: red;
margin-left:10px;
margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
.tile-row > div:nth-of-type(1)
{
float: none;
margin: 10px 100px;
}
}
@media only screen and (max-width: 460px) {
.tile-row > div:nth-of-type(1){
margin: 10px 0;
}
.tile{
float:none;
background: blue;
margin: 10px 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.