Question

我正在尝试根据窗口大小重新定位一些div，使用@media声明。除了容器1和容器2之间的大空间外，我可以让第一个开关工作。

<div class="container">
    <div class="container1">
        <div id="a">
            A Element
        </div>
        <div id="b">
            B Element
        </div>
    </div>
    <div class="container2">
        <div id="c">
            C Element
        </div>
        <div id="d">
            D Element
        </div>
    </div>
</div>

以下是JSFiddle代码： https://jsfiddle.net/trout0525/w1frhwub/1/

我试图让最后一个@media转到这个布局，但保持div元素内容相同。 I.E.重新定位divs /调整它们的大小。

<div class="container">
    <div class="container1">
        <div id="a">
            A Element
        </div>
        <div id="c">
            C Element
        </div>
    </div>
    <div class="container2">
        <div id="b">
            B Element
        </div>
        <div id="d">
            D Element
        </div>
    </div>
</div>

这里是它的JSFIDDLE： https://jsfiddle.net/trout0525/w1frhwub/3/

[务必切换窗口宽度以查看差异]

是否有一种方法可以使用flex或a：before：之后才能在调整大小时发生这种情况？

注意：我不想使用任何jQuery，只有CSS3和HTML5。

{抱歉，没有人表现得很好，最初没有人去JSFiddle。}

Answer 1

你可以这样做。使用flexbox。

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.container1,
.container2 {
  width: 100px;
  height: 50px;
}

.container1 {
  background-color: red;
}

.container2 {
  background-color: green;
}

@media (max-width: 560px) {
  .container2 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  .container1 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}

<div class="container">
    <div class="container1">
        <div id="a">
            A Element
        </div>
        <div id="b">
            B Element
        </div>
    </div>
    <div class="container2">
        <div id="c">
            C Element
        </div>
        <div id="d">
            D Element
        </div>
    </div>
</div>

Answer 2

好的，我找到了解决方案。它使用的是双重任务，但它有效。

这是HTML：

<div class="container">
  <div class="containerA">
    <div class="container1A">
      <div id="a">
        A Element
      </div>
      <div id="b">
        B Element
      </div>
    </div>
    <div class="container2A">
      <div id="c">
        C Element
      </div>
      <div id="d">
        D Element
      </div>
    </div>
  </div>
  <div class="containerB">
    <div class="container1B">
      <div id="a">
        A Element
      </div>
      <div id="c">
        C Element
      </div>
    </div>
    <div class="container2B">
      <div id="b">
        B Element
      </div>
      <div id="d">
        D Element
      </div>
    </div>
  </div>
</div>

和CSS：

.container {
  height: 400px;
  width: 100%;
  position: absolute;
}

.containerA {
  position: absolute;
  top: 0px;
  left: 0px;
}

.containerB {
  position: absolute;
  top: 0px;
  left: 0px;
}

#a {
  background-color: red;
}
#b {
  background-color: yellow;
}
#c {
  background-color: green;
}
#d {
  background-color: blue;
}

@media screen and (max-width: 480px){
  .containerA {
    width: 100%;
    height: 100%;
  }
  .containerB {
    display: none;
  }
  .container1A {
    width: 100%;
    height: 50%;
  }
  .container2A {
    width: 100%;
    height: 50%;
  }
  .container1B{
    width: 0%;
    height: 0%;
  }
  .container2B {
    width: 0%;
    height: 0%;
  }
  #a {
    width: 100%;
    height: 50%;
  }
  #b {
    width: 100%;
    height: 50%;
  }
  #c {
    width: 100%;
    height: 50%;
  }
  #d {
    width: 100%;
    height: 50%;
  }
}

@media screen and (min-width: 480px) and (max-width: 600px) {
  .containerA {
    width: 100%;
    height: 100%;
  }

  .containerB {
    display: none;
  }
  .container1A {
    width: 100%;
    height: 50%;
  }
  .container2A {
    width: 100%;
    height: 50%;
  }
  .container1B {
    width: 0%;
    height: 0%;
  }
  .container2B {
    width: 0%;
    height: 0%;
  }
  #a {
    width: 50%;
    height: 100%;
    float: left;
  }
  #b {
    width: 50%;
    height: 100%;
    float: right;
  }
  #c {
    width: 100%;
    height: 50%;
  }
  #d {
    width: 100%;
    height: 50%;
  }
}

@media screen and (min-width: 600px) {
  .containerA {
    display: none;
  }

  .containerB {
    width: 100%;
    height: 100%;
  }

  .container1A {
    width: 0%;
    height: 0%;
  }
  .container2A {
    width: 0%;
    height: 0%;
  }
  .container1B {
    width: 50%;
    height: 100%;
    float: left;
  }
  .container2B {
    width: 50%;
    height: 100%;
    float: right;
  }
  #a {
    width: 100%;
    height: 66%;
  }
  #b {
    width: 100%;
    height: 33%;
  }
  #c {
    width: 100%;
    height: 33%;
  }
  #d {
    width: 100%;
    height: 66%;
  }
}

这是JSFiddle：

https://jsfiddle.net/trout0525/w1frhwub/5/

css在调整大小

2 个答案: