如何在较小的屏幕上更改 div 的顺序?
[英] How to change order of divs on smaller screens?
本文介绍了如何在较小的屏幕上更改 div 的顺序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当屏幕尺寸小于 480 像素时，我需要重新排列 div.
我不想使用 position: absolute 因为绿色区域的高度可能会因文本数量而异.
我需要小屏幕的顺序是红色、绿色、红色、绿色、红色、绿色(每个红色都在紧邻的绿色之上，宽度为 100%).
有什么想法吗?非常感谢
*, html, body {边距:0；填充:0；}.容器 {宽度:100%；显示:内联块；box-sizing: 边框框；}.full_half {显示:内联块；宽度:50%；背景颜色:绿色；向左飘浮;最小高度:100px；}.pic {背景颜色:红色；高度:100px；}.文本 {box-sizing: 边框框；填充:20px 120px；}@media 屏幕和(最大宽度:480 像素){.full_half {宽度:100%；}.文本{填充:0 0 ！重要；}}
<div class="full_half pic"></div><div class="full_half text">test</div>
<div class="容器"><div class="full_half text">test</div><div class="full_half pic"></div>
<div class="容器"><div class="full_half pic"></div><div class="full_half text">dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
已解决:
我终于通过将 flexbox 应用到容器来改变顺序(仅当宽度小于 480 像素时).
css 变化:
@media screen and (max-width: 480px) {.容器 {弹性方向:列；}.pic {订单:1；}.文本{订单:2；}}
http://jsfiddle.net/vquf7z7b/
解决方案
With CSS Flexbox 你可以用 order 属性控制元素的视觉顺序，用 控制 div 的 x/y 方向flex-direction 属性.
以下是对您的代码进行的一些简单调整，以使您的布局正常工作:
CSS
.container {显示:弹性；/* 新的 *//* 宽度:100%；*//* 显示:内联块；*//* 框大小:边框框；*/}@media 屏幕和(最大宽度:480 像素){.full_half { 宽度:100%；}.text { 填充:0 0 !important;}.container { 弹性方向:列；} /* 新的 */.container:nth-child(2) >.pic { 顺序:-1;} /* 新的 */}
现在当屏幕尺寸小于 480px 时，div 被堆叠在一个列中，顺序是红色、绿色、红色、绿色、红色、绿色.
*,html,身体 {边距:0；填充:0；}.容器 {显示:弹性；}.full_half {显示:内联块；宽度:50%；背景颜色:绿色；向左飘浮;最小高度:100px；}.pic {背景颜色:红色；高度:100px；}.文本 {box-sizing: 边框框；填充:20px 120px；}@media 屏幕和(最大宽度:480 像素){.full_half {宽度:100%；}.文本 {填充:0 0 ！重要；}.容器 {弹性方向:列；}.container:nth-child(2) >.pic {顺序:-1；}}
<div class="full_half pic"></div><div class="full_half text">test</div>
<div class="容器"><div class="full_half text">test</div><div class="full_half pic"></div>
<div class="容器"><div class="full_half pic"></div><div class="full_half text">dfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf<br/>dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf<br/>dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf<br/>
修正小提琴
在上面的例子中，flex容器(.container)的子元素排成一行，这是flexbox的默认布局(flex-direction:row)代码>).
每个子元素默认为order: 0.通过给 div 和第二个 .container 中的 .pic 类一个 order 值 -1，它被定位在其同级之前(div 与 .text 的值为 0).我们也可以给第一个兄弟节点一个值 1，从而将它移动到 div 之后和 .pic.详细了解 order 属性.
通过将 flex-direction 的值从其默认值 (row) 更改为 column，这些 div 将堆叠在一个列中.详细了解flex-direction财产.
<小时>浏览器支持: Flexbox 被所有主流浏览器支持，除了 IE <10.一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 供应商前缀.要快速添加所需的所有前缀，请使用 Autoprefixer.此答案中的更多详细信息.
I need to reorder the divs when screen size is less than 480px.
I don't want to use position: absolute because the height of the green area may vary due to amount of text.
I need the small screen order to be red, green, red, green, red, green (each red being on top of the immediate green and width being 100%).
Any idea? Many thanks
*, html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: inline-block;
box-sizing: border-box;
}
.full_half {
display: inline-block;
width: 50%;
background-color: green;
float: left;
min-height: 100px;
}
.pic {
background-color: red;
height: 100px;
}
.text {
box-sizing: border-box;
padding: 20px 120px;
}
@media screen and (max-width: 480px) {
.full_half {
width: 100%;
}
.text{
padding: 0 0 !important;
}
}
<div class="container">
<div class="full_half pic"></div>
<div class="full_half text">test</div>
</div>
<div class="container">
<div class="full_half text">test</div>
<div class="full_half pic"></div>
</div>
<div class="container">
<div class="full_half pic"></div>
<div class="full_half text">
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
</div>
</div>
SOLVED:
I have finally managed to changed the order by applying flexbox to the container (only when width is less than 480px).
css change:
@media screen and (max-width: 480px) {
.container {
flex-direction: column;
}
.pic {
order: 1;
}
.text{
order: 2;
}
}
http://jsfiddle.net/vquf7z7b/
解决方案
With CSS Flexbox you can control the visual order of elements with the order property and the x/y direction of the divs with the flex-direction property.
Here are a few simple adjustments to your code that make your layout work:
CSS
.container {
display: flex; /* NEW */
/* width: 100%; */
/* display: inline-block; */
/* box-sizing: border-box; */
}
@media screen and (max-width: 480px) {
.full_half { width: 100%; }
.text { padding: 0 0 !important; }
.container { flex-direction: column; } /* NEW */
.container:nth-child(2) > .pic { order: -1; } /* NEW */
}
Now when the screen size is less than 480px the divs are stacked in a single column and the order is red, green, red, green, red, green.
*,
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.full_half {
display: inline-block;
width: 50%;
background-color: green;
float: left;
min-height: 100px;
}
.pic {
background-color: red;
height: 100px;
}
.text {
box-sizing: border-box;
padding: 20px 120px;
}
@media screen and (max-width: 480px) {
.full_half {
width: 100%;
}
.text {
padding: 0 0 !important;
}
.container {
flex-direction: column;
}
.container:nth-child(2) > .pic {
order: -1;
}
}
<div class="container">
<div class="full_half pic"></div>
<div class="full_half text">test</div>
</div>
<div class="container">
<div class="full_half text">test</div>
<div class="full_half pic"></div>
</div>
<div class="container">
<div class="full_half pic"></div>
<div class="full_half text">
dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
<br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
<br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
<br />
</div>
</div>
revised fiddle
In the example above, child elements of the flex container (.container) are aligned in a row, which is the default layout of a flexbox (flex-direction: row).
Each child element is order: 0 by default. By giving the div with the .pic class in the second .container an order value of -1, it gets positioned before its sibling (div with .text with a value of 0). We could also have given the first sibling a value of 1, thus moving it after div with .pic. Learn more about the order property.
By changing the value of flex-direction from its default (row) to column, the divs stack up in a single column. Learn more about the flex-direction property.
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.
这篇关于如何在较小的屏幕上更改 div 的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
