DIV 向右浮动 DIV 向左浮动

Question

您好，我有一个导航 div，它的底部有一个 div。这个 div 有另外两个 divs "DIV 1" 和 "DIV 2"（见图片）。现在我在平板设备上关闭了导航，所以我将显示第二个 div 包含 float: right 在第一个 div 包含 float: left 的上方，如图所示。我怎样才能做到这一点？现在第一个 div 超过了第二个。谢谢

Answer 1

您可以使用 media queries 来达到这个目的。

您可以在某些时候操纵您的 div 来改变它们的样式。

@media (max-width: 600px) {
  #someElement {
    float: left;
  }
}

Answer 2

您可以尝试以下方法以及媒体查询来删除 800 像素处的浮动：

JSFiddle：https://jsfiddle.net/7ws3m9Lx/

CSS:

.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }

@media screen and (min-width: 0) and (max-width: 800px){
    .div1,.div2 { float: none; width: 100%; }
}

HTML:

<div class="parent">
    <div class="div2">DIV2</div>
    <div class="div1">DIV1</div>
</div>

Answer 3

你可以用 Flexbox 做到这一点，媒体查询只需将第二个元素的 order 更改为 order: -1 ，这里是 Fiddle

.nav {
  height: 200px;
  display: flex;
  align-items: flex-end;
  border: 1px solid black;
}
.one {
  background: #5B9BD5;
}
.two {
  background: #FF0000;
}
.div {
  flex: 1;
  padding: 10px 0;
  border: 1px solid black;
  margin: 5px;
  box-sizing: border-box;
}
@media(max-width: 480px) {
  .nav {
    flex-direction: column;
    align-items: normal;
    justify-content: flex-end;
  }
  .div {
    flex: 0 0 50px;
  }
  .two {
    order: -1;
  }
}

<div class="nav">
  <div class="div one">1</div>
  <div class="div two">2</div>
</div>

DIV 向右浮动 DIV 向左浮动

DIV with float right over DIV with float left

html

css

floating