如何在较小的屏幕上更改 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屋!
查看全文