Question

这些是3 inline-block和元素，这意味着它们将彼此相邻排序。

以下是查看所有内容的小提琴：https://jsfiddle.net/8mdm8eox/

＆＃13;

.wrapper {
  background: #fff;
  width: 100%
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3)
}

.firstElement {
  background: #000;
  color: #fff
}

.secondElement {
  background: grey
}

.thirdElement {
  background: #ddd
}

@media (max-width: 767px) {}

＆＃13;

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

＆＃13;

所以这就是我想要的，我希望当屏幕宽度为767px或更低时：

@media (max-width: 767px){}

前两个元素垂直排序，第三个元素与另外两个元素水平排序，因此它们变得像：

   _______________    ________________
   |First Element|    |ٍ              |
   _______________    |              |  
                      |Third Element |
   ________________   |              |
   |Second Element|   |              |
   _________________  _______________

不要担心第三个元素，文本会被破坏，我只想让前两个元素看起来像这样而不改变html。

Answer 1

有多种方法可以在不改变HTML的情况下重新排序元素。

CSS flexbox提供order属性。但是，flex可能不是一个很好的选择，因为您希望一个元素跨越两行。您可能会遇到的问题在这里讨论：

然而，

CSS网格布局为您的问题提供了许多好的解决方案。此处也可以使用order属性，但这不是必需的。

这是使用grid-template-areas属性的一种解决方案。

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "first second third";
}

.firstElement {
  grid-area: first;
  background: #000;
  color: #fff
}

.secondElement {
  grid-area: second;
  background: grey
}

.thirdElement {
  grid-area: third;
  background: #ddd
}

@media (max-width: 767px) {
  .wrapper {
    grid-template-areas: "first third" 
                         "second third";
  }

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

jsFiddle demo

Browser support for CSS Grid.

Answer 2

您需要在flex-wrap上使用.wrapper，在儿童身上使用order。

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}

.wrapper {
  background: #fff;
  max-width: calc(100%/2);
  display: flex;
  flex-wrap: wrap;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 50%
}

.firstElement {
  background: #000;
  color: #fff;
  order: 1;
}

.secondElement {
  background: grey;
  order: 3;
}

.thirdElement {
  background: #ddd;
  order: 2;
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

Answer 3

如果您不想使用flex，那么表布局属性可以提供帮助。

使用https://codepen.io/gc-nomade/pen/yjrOJJ或只是在下面运行演示。

＆＃13;

.wrapper {
  background: #fff;
  width: 100%;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 33%;/* will be usefull for the mediaquerie . tune to your own value / needs */
  margin: 0.11%;/* if ever needed */
}

.firstElement {
  background: #000;
  color: #fff;
}

.secondElement {
  background: grey;
}

.thirdElement {
  background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .wrapper {
    display: table;/* trigger the table-layout */
  }
  .a {
    display: block;
    margin: 2px;
  }
  .b {
    display: table-cell;/* make this one only acting as a cell aside previous */
  }
}

＆＃13;

<div class="wrapper">
  <div class="firstElement a">First Element</div><!-- comment to override inline-block side effect 
  --><div class="secondElement a">Second Element</div><!--
  --><div class="thirdElement b">Third Element</div>
</div>

＆＃13;

对于真正的重新排序，flex或grid将在任何数量的孩子中进行。

表格布局属性允许在单行上显示此视觉效果，但适用于旧浏览器。

Answer 4

由于问题未使用flex或新技术标记，也未包含在源代码中，因此这是一个反映出这一点的解决方案：

*请注意，我将元素的宽度更改为100％/ 3.1以获得视觉效果，您可以根据需要进行更改。

＆＃13;

.wrapper {
  background: #fff;
  position: relative;
  width: 100%;
  height: 500px;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3.1)
}

.firstElement {
  background: #000;
  color: #fff;
  height: 33%;
}

.secondElement {
  background: grey;
  height: 33%
}

.thirdElement {
  background: #ddd;
  height: 33%
}

@media (max-width: 767px) {
  .firstElement, .secondElement, .thirdElement {
    width: 50%;
  }
  .firstElement {
    float: left;
  }
  .secondElement {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .thirdElement {
    float: left;
    height: 100%;
  }
}

＆＃13;

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

＆＃13;

基本上，使包装position相对给予我们儿童内部绝对定位的自由。我们可以利用这个

Answer 5

您可以使用定位轻松完成，这有很好的支持，并且可选择与 CSS变量结合使用，他们的支持正在增加，并且不是很少：

:root { --firstElementHeight: 50px; /* adjust */ --secondElementHeight: 50px; /* adjust */ --thirdElementHeight: calc(var(--firstElementHeight) + var(--secondElementHeight)); /* the sum of other siblings heights so that the "columns" always match */ } .firstElement, .secondElement, .thirdElement {display: inline-block; width: 33.33%} .firstElement {background: #000; color: #fff} .secondElement {background: grey} .thirdElement {background: #ddd} @media (max-width: 767px) { .wrapper {position: relative} .firstElement {height: var(--firstElementHeight)} .secondElement {height: var(--secondElementHeight); position: absolute; left: 0; top: var(--firstElementHeight)} /* moved down by the height of the .firstElement */ .thirdElement {height: var(--thirdElementHeight)} }

<div class="wrapper"> <div class="firstElement">First Element</div> <div class="secondElement">Second Element</div> <div class="thirdElement">Third Element</div> </div>

即使没有 CSS变量，定位解决方案也相当简单可靠。

如何在不更改html代码的情况下更改元素的顺序？

5 个答案:

jsFiddle demo