如何在较小的屏幕上更改div的顺序? [英] How to change order of divs on smaller screens?
问题描述
当屏幕尺寸小于480px时,我需要对div重新排序.
I need to reorder the divs when screen size is less than 480px.
我不想使用position: absolute
,因为绿色区域的高度可能会因文本量而有所不同.
I don't want to use position: absolute
because the height of the green area may vary due to amount of text.
我需要将小屏幕的顺序设置为红色,绿色,红色,绿色,红色,绿色(每个红色位于紧邻的绿色之上,宽度为100%).
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>
已解决:
我终于设法通过将flexbox应用于容器来更改顺序(仅当宽度小于480px时).
I have finally managed to changed the order by applying flexbox to the container (only when width is less than 480px).
css更改:
@media screen and (max-width: 480px) {
.container {
flex-direction: column;
}
.pic {
order: 1;
}
.text{
order: 2;
}
}
推荐答案
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 */
}
现在,当屏幕尺寸小于480px时,div会堆叠在一个列中,并且顺序为红色,绿色,红色,绿色,红色,绿色.
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>
在上面的示例中,flex容器(.container
)的子元素在一行中对齐,这是flexbox(flex-direction: row
)的默认布局.
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
).
每个子元素默认为order: 0
.通过在第二个.container
中为div
类的div
赋予order
值-1,它位于同级之前(div
和.text
的值为0).我们也可以将第一个同胞的值设为1,然后将其与.pic
一起移动到div
之后. 详细了解order
属性.
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.
通过将flex-direction
的值从其默认值(row
)更改为column
,div将堆积在单列中. 详细了解flex-direction
属性.
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.
浏览器支持: 所有主要的浏览器都支持Flexbox,除了IE< 10 .某些最新的浏览器版本(例如Safari 8和IE10)需要供应商前缀.要快速添加所需的所有前缀,请使用 Autoprefixer . 此答案.
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屋!