如何交换div的位置？

Question

我希望能够根据屏幕大小交换两个 div 的位置。 我有这个JSfiddle。

HTML

<div class="divMain">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

CSS

.divMain{
    height: 500px;
    width: 500px;
    border: 2px solid black;
}

.div2{
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 2px solid red;
}

.div3{
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 2px solid blue;
}

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }

    .div3{
        background-color: blue;
    }
}
}

当屏幕尺寸大于 500px 宽时，我希望 div2 位于左侧，div3 位于右侧。一旦屏幕尺寸减小到 500 像素或更小，我希望 div2 位于右侧，而 div3 位于左侧。

我该怎么办？

非常感谢您的帮助。 谢谢

Answer 1

您可以在 div 3 左侧添加一个浮点数

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }

    .div3{
        background-color: blue;
        float:left;
    }
}

这会将 div 3 拉到 div 2 的左侧

小提琴：https://jsfiddle.net/x0x2tu38/3/

Answer 2

这可能是一种 hack，但是当我希望根据屏幕大小将元素布置在 HTML 文档的不同部分中时——而不是仅仅设置不同的样式——时，我发现自己正在尝试的一种技术是只需复制元素，然后使用 @media 查询隐藏或显示元素的两个版本。

使用您的示例：

HTML

<div class="divMain">
  <div class="div2 visible-small"></div>
  <div class="div3"></div>
  <div class="div2 visible-large"></div>
</div>

CSS

.divMain{
  height: 500px;
  width: 500px;
  border: 2px solid black;
}

.div2{
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 2px solid red;
}

.div3{
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 2px solid blue;
}

@media only screen and (max-width: 500px) {
  .visible-large {
    display: none;
  }

  .div2{
    background-color: red;
  }

  .div3{
    background-color: blue;
  }
}

@media only screen and (min-width: 501px) {
  .visible-small {
    display: none;
  }
}

我不能说这是否会对性能产生影响，但它确实可以完成工作。我更喜欢它主要是因为它涵盖了所有情况——不仅仅是当有问题的元素在 HTML 文档中一个接一个地出现时——还因为我发现 css float 属性的行为超出了我简单的头脑所能掌握的范围.

我还应该说，如果您使用的是 Bootstrap，那么helper classes that do this are built in！它看起来像Foundation has classes that do something similar。

Answer 3

尝试使用弯曲：

显示

这定义了一个弹性容器；内联或块取决于给定的值。它为其所有直接子项启用了弹性上下文：

.container {
  display: flex; /* or inline-flex */
}

弯曲方向

这建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。 Flexbox 是（除了可选的包装）一个单向布局概念。将 flex 项视为主要以水平行或垂直列布局：

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• 行（默认）：在ltr中从左到右； rtl 从右到左
• row-reverse：在 ltr 中从右到左； rtl 从左到右
• 列：与行相同，但从上到下
• column-reverse：与 row-reverse 相同，但从下到上

弹性包装

默认情况下，弹性项目将全部尝试放在一行中。您可以更改它并允许使用此属性根据需要包装项目。方向在这里也起作用，确定新线的堆叠方向。

.container{
flex-wrap: nowrap | wrap | wrap-reverse;

}

• nowrap（默认）：在 ltr 中单行/从左到右； rtl 从右到左
• 换行：在 ltr 中多行/从左到右； rtl 从右到左
• wrap-reverse：在 ltr 中多行/从右到左； rtl 从左到右

调整内容

这定义了沿主轴的对齐方式。当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配剩余的额外可用空间。当项目溢出行时，它还会对项目的对齐方式施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认）：项目向起始行打包

• flex-end：项目被打包到终点线

• 居中：项目沿线居中

• space-between：项目在行中均匀分布；第一项在起始行，最后一项在结束行

• space-around：项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一项与容器边缘有一个空间单位，但下一项之间有两个空间单位，因为下一项有自己的间距。

对齐项目

这定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为横轴（垂直于主轴）的 justify-content 版本。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：项目的cross-start边距边缘放置在cross-start线上
• flex-end：项目的cross-end margin边缘放置在cross-end线上
• center：项目在横轴上居中
• 基线：项目对齐，例如它们的基线对齐
• 拉伸（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）

对齐内容

这会在横轴上有额外空间时对齐 flex 容器的线条，类似于 justify-content 如何在主轴内对齐单个项目。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：打包到容器开头的行
• flex-end：行打包到容器的末尾
• center：排列到容器中心的行
• space-between：线条均匀分布；第一行在容器的开头，最后一行在结尾
• space-around：行均匀分布，每行周围的空间相等
• 拉伸（默认）：线条拉伸以占用剩余空间

按照上面的方法，尝试在你的代码中使用类似的东西：

<div class="container">
    <button>div1</button>
    <button>div1</button>
</div
@media only screen and (max-width: 500px) {
    .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: center
    }
}

我还为你准备了sn-p让你玩。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

<div class="container">
    <button>div1</button>
    <button>div1</button>
</div>

更多关于 flex 的信息（包括示例），您可以找到 here