如何在较小的屏幕上更改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;
    }
}

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 */
}

现在，当屏幕尺寸小于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屋！