我正在构建一个响应式网站,可以在不同的视口宽度中查看时任意更改窗口小部件的位置。任意切换DOM元素的位置
从外观上看,它把这个:
进入这个:
我的第一种方法以这种方式设置占位符div元素:
<div data-change-from=".my-element"></div>
和使用response.js来检测宽度并使用jQuery移动元素,但使用复杂的网格和更多的小部件变得难以管理。
什么是高效可靠的方法?
我正在构建一个响应式网站,可以在不同的视口宽度中查看时任意更改窗口小部件的位置。任意切换DOM元素的位置
从外观上看,它把这个:
进入这个:
我的第一种方法以这种方式设置占位符div元素:
<div data-change-from=".my-element"></div>
和使用response.js来检测宽度并使用jQuery移动元素,但使用复杂的网格和更多的小部件变得难以管理。
什么是高效可靠的方法?
这是伟大的,做所有的事情。
body { position: relative }
body:after {
content: '';
display: block;
clear: both;
}
#one, #two, #three, #four, #five, #six {
height: 40px;
background: #aaa;
margin: 8px 1%;
float: right;
}
#one-two {
position: absolute;
bottom: 0;
right: 0;
width: 45%;
}
#one, #two { width: 100% }
#three, #four, #five, #six {
float: left;
width: 100%;
}
#five, #six { width: 50% }
@media screen and (min-width: 1000px) {
#one-two {
position: static;
display: inline;
}
#one, #three, #five {
width: 60%;
float: left;
}
#two, #four, #six {
width: 35%;
float: right;
}
}
只需要一个额外的容器:
<div id="one-two">
<div id="two">2</div>
<div id="one">1</div>
</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
基本上我有,除非在媒体查询(min-width: 1000px)
覆盖多数民众赞成应用默认样式。这通过调整浮点数和宽度来重新排列元素,并且在#one
和#two
应用position: absolute
(将其移动到底部)的情况下重新排列元素。当窗口足够大时,媒体查询会覆盖样式,形成一个很好的简单网格。
请注意图像上的颜色。相同的颜色框实际上是相同的html元素。 –
是的,我知道。 http://jsfiddle.net/UL7SJ/ – bjb568
曾经想过同位素(link [here](http://isotope.metafizzy.co/))或石工(link [here](http://masonry.desandro.com/)),他们都这样做排序 – OJay