响应性设计，堆叠div无序
响应性设计，堆叠div无序
提问于 2014-10-29 20:56:15
我想知道是否有一种纯粹的CSS方式来堆叠3(或更多)div，当它们变得足够小时，将一个放在另一个上面。
我的意思是，我有3分钱
| |
|[1] [2] [3]|
| |我想把它们堆叠起来：
| |
|[3]|
|[1]|
|[2]|
| |在CSS中有任何方法来进行这种堆叠吗？或者我必须使用javascript来完成这个任务吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-10-29 21:14:58
您可以向右浮动#3 (内容顺序第一)，向左浮动#1和#2。移除屏幕尺寸较小的浮标。
Stack Overflow用户
发布于 2014-10-29 21:45:26
我喜欢使用表组来帮助我处理与文档流相反的困难订单。
小提琴
示例
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>CSS
ul {
display: table;
width: 100%;
}
ul li {
width: 33%;
text-align: center;
box-sizing:border-box;
}
.two {
display: table-footer-group;
/* Will be displayed at the bottom */
background-color: green;
}
.one {
display: table-row-group;
/* Will be displayed in the middle */
background-color: yellow;
}
.three {
display: table-header-group;
/* Will be displayed at the top */
background-color: lightblue;
}
@media (min-width: 600px) {
ul li {
float: left;
}
}Stack Overflow用户
发布于 2014-10-29 21:11:22
虽然不是很漂亮，但处理这一问题的典型方法是使用负边距。如果您在小屏幕和大屏幕上查看下面的代码片段，您将看到所需的顺序。我使用负值和正边距来移动列。
@media (min-width: 600px) {
.column {
float: left;
width: 33.33%;
}
.column-right {
margin-left: 66.66%;
}
.column-left {
margin-left: -100%;
}
.column-middle {
margin-left: -66.66%
}
}<div class="column column-right">3</div>
<div class="column column-left">1</div>
<div class="column column-middle">2</div>
大多数响应性网格系统都内置了类似的内容。例如，Bootstrap在使用left和right属性的推和拉类中遵循类似的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26640527
复制相关文章
相似问题
腾讯云开发者
