如何以不同的方式排列 3 个 div 以进行响应式设计 [英] How to arrange 3 divs in a different way for responsive design

问题描述

我正在重新设计包含 3 个 div 的页面，我想让它具有响应性.

我面临的问题是大屏幕的div是按照1,2,3的顺序排列的.但是，对于响应式设计，我想将顺序更改为 1,3,2:

我尝试了不同的方法，例如将 position 更改为 relative/absolute/static 或更改 div 使用替代 CSS 代码的顺序，但到目前为止没有任何证明有效.

有什么想法可以实现这一目标吗?

.one {向左飘浮;宽度:150px；边框:实心 2px #eaeaea;位置:相对；z-索引:0；底边距:20px；高度:100px；}.二 {向左飘浮;边距:0 0 0 24px；宽度:150px；边框:实心 2px #eaeaea;高度:100px；}.三 {向左飘浮;宽度:900px；边框:实心 2px #eaeaea;高度:100px；}@media only screen and (max-width: 500px) {.一 {宽度:93%；填充:3%；}.二 {宽度:100%；左边距:0px；}.三 {宽度:100%；边距:0px；}}

<div class="one">Content1</div><div class="two">Content2</div><div class="three">Content3</div><div class="500markup">这个框是500px</div>

JSFIDDLE 在这里

解决方案

Flexbox 可以做到这一点.

JSfiddle 演示

* {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.container div {高度:150px；边框:1px纯红色；底边距:10px；}.容器 {填充:5px；位置:相对；显示:弹性；flex-wrap: 包裹;对齐内容:间隔；宽度:500px；边框:1px 纯灰色；}#一，#二 {宽度:220px；}#三 {宽度:500px；}@media(最大宽度:600px){#一 {订单:1；宽度:500px；}#二 {订单:3；宽度:500px；}#三 {订单:2；}

<div id="one">Content1</div><div id="two">Content2</div><div id="三">Content3</div>

I am working on a page redesign that contains 3 divs and I want to make it responsive.

The problem I face is that the divs for large screen are arranged in the order 1,2,3. For responsive design however, I want to change the order to 1,3,2:

I tried different approaches like changing position to relative/absolute/static or changing the divs order with alternative CSS code but nothing proved to work so far.

Any ideas how I can achieve this?

.one {
  float: left;
  width: 150px;
  border: solid 2px #eaeaea;
  position: relative;
  z-index: 0;
  margin-bottom: 20px;
  height: 100px;
}
.two {
  float: left;
  margin: 0 0 0 24px;
  width: 150px;
  border: solid 2px #eaeaea;
  height: 100px;
}
.three {
  float: left;
  width: 900px;
  border: solid 2px #eaeaea;
  height: 100px;
}
@media only screen and (max-width: 500px) {
  .one {
    width: 93%;
    padding: 3%;
  }
  .two {
    width: 100%;
    margin-left: 0px;
  }
  .three {
    width: 100%;
    margin: 0px;
  }
}

<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>

<div class="500markup">This box is 500px</div>

JSFIDDLE HERE

解决方案

Flexbox can do this.

JSfiddle Demo

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container div {
  height: 150px;
  border: 1px solid red;
  margin-bottom: 10px;
}
.container {
  padding: 5px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 500px;
  border: 1px solid grey;
}
#one,
#two {
  width: 220px;
}
#three {
  width: 500px;
}
@media (max-width: 600px) {
  #one {
    order: 1;
    width: 500px;
  }
  #two {
    order: 3;
    width: 500px;
  }
  #three {
    order: 2;
  }

<div class="container">
  <div id="one">Content1</div>
  <div id="two">Content2</div>
  <div id="three">Content3</div>
</div>

这篇关于如何以不同的方式排列 3 个 div 以进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！