Question

我有两个div彼此相邻地以行内显示方式显示，每个宽度为45％。在某个断点处，它们的宽度都更改为100％，导致它们堆叠。这显然是超级简单的。我的问题是：如何更改上述断点处的标记，以使底部div出现在顶部？

我现有的标记在很大程度上取决于inline-block级别的显示，并且我目前不希望将其切换到整个网站的flexbox。因此，我正在寻找使用inline-block的解决方案。

考虑以下简单示例：

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
}
.right {
  background-color:aquamarine ;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}

<div class="left">
  <p>LEFT</p>
</div>

<div class="right">
  <p>RIGHT</p>
</div>

这里一切都很好，但是我想要的结果是 RIGHT div在中断后显示在 LEFT div的顶部，点。我显然可以使用flexbox来实现div的重新排序，但这需要花费数小时的工作才能切换所有内容以支持此显示属性。我需要一个inline-block解决方案。思想得到赞赏。

Answer 1

使用float来指定div的位置，然后在html上切换div，以使右侧位于左侧上方

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
  float:left;
}
.right {
  background-color:aquamarine ;
  float:right;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}

<div class="right">
  <p>RIGHT</p>
</div>

<div class="left">
  <p>LEFT</p>
</div>

Answer 2

您可以使用display: flex; css属性。基本方法是将父元素（例如容器）设置为display: flex;，这会生成flexbox，并允许您为子元素设置不同的参数，例如

  .right{
    order: 1;
  }
  .left{
    order: 2
  }

根据支持网站所需的浏览器，可以使用flex-box。检查弹性框支持here

.left,
.right {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 100px 0;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    flex-direction: column
  }
  .right {
    order: 1;
  }
  .left {
    order: 2
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

更新

您可以使用rotate()转换函数来获得所需的结果。下面的工作演示：

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .container>div {
    display: block;
    margin: 0 auto 5px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

更新2 使用jQuery

$(window).resize(function() {
  if ($(window).width() <= 550) {
    $('.left').remove().insertAfter($('.right'));
  } else {
    $('.left').remove().insertBefore($('.right'));
  }
})

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

Answer 3

我建议您使用显示flex，因为它们在对齐，定位等方面有很多好处。

我通过将.left和.right包装在flex容器中，并相应地更改了flex-direction，来解决您的问题。

.container
{
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
@media only screen and (max-width: 550px) { 
   .container
  {
    display:flex;
    flex-direction:column-reverse;
    justify-content:flex-start
  }
}

为了更好的理解，我创建了一个工作提琴：https://jsfiddle.net/Baliga/pqo69s3t/2/

Answer 4

如果您想要不使用import React, { Component } from 'react'; import Select from 'react-select'; import url from '../services/urlService'; class TechCompanies extends Component { state = { values: [] } componentDidMount() { fetch(url + 'api/roles/roles') .then(res => res.json()) .then(res => this.setState({ values: res.Data })) .catch(error => console.log(error)) } render() { return ( <div> <Select> {this.state.values.map((role) => { return <option key={role.RoleId} value={role.RoleId} >{role.RoleName}</option> })} </Select> </div> ) } } export default TechCompanies;的解决方案，那么使用css的唯一方法是将div flex定位，但是将absolute和{{1} } | height值必须相应定义。

否则，使用javascript是唯一的方法。示例：

top

您可以在特定的视口宽度处触发此操作，并获得div的顺序切换。

如何在断点处重新排序div /更改标记

4 个答案: