如何在 css-flex-float 中调整三个 div 一个左侧和另外两个右侧？答案

【问题标题】：How to adjust three div one left and other two right side in css-flex-float?如何在 css-flex-float 中调整三个 div 一个左侧和另外两个右侧？
【发布时间】：2021-01-15 01:10:34
【问题描述】：

我想设置三个 div 一个左侧和另外两个左侧但float: right; 不解决我的问题。我正在尝试流动的代码。

.container .A {
    float:left;
    width:100px;
    height: 80px;
    background: lightskyblue;
}

.container .B {
    float:right;
    width:100px;
    height: 80px;
    background:  lightgreen;
}

.container .C {
    float:right;
    width:100px;
    height: 80px;
    background: hotpink;
}

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C </div>
</div>

我想根据下图设置 div。

对于移动视图，我想更改 div，如下图所示

【问题讨论】：

使用弹性和媒体查询。这会容易得多，而且没有副作用。

标签： html css flexbox css-grid

【解决方案1】：

这是 flex 解决方案。

您可以使用order 规则交换块。

另外，我添加了一个媒体查询。

.container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.container .A {
    width:100px;
    height: 80px;
    background: lightskyblue;
    margin-right: auto;
}

.container .B {
    width:100px;
    height: 80px;
    background:  lightgreen;
}

.container .C {
    width:100px;
    height: 80px;
    background: hotpink;
}

@media (max-width: 767px) {
  .container .A {
    margin-right: unset;
    order: 2;
  }

  .container .B {
    order: 3;
  }

  .container .C {
    order: 1;
    margin-right: auto;
  }
}

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C </div>
</div>

【讨论】：

：您好。你的回答很好，而且你的速度比我的快:) 我认为 order 属性只需要一次，也仅在 .box C 上:) 一次查看我的解决方案^^！
@ImranRafiqRather，每个开发人员对这个或那个功能的实现都有自己的观点。
@ImranRafiqRather，谢谢你的团结:)

【解决方案2】：

尝试使用flexbox 和media queries。我在媒体查询中使用了order 属性来更改小屏幕上框的位置:)

CODEPEN 链接： https://codepen.io/emmeiWhite/pen/eYdQKgy

完整代码：

.container{
  display:flex;
}

.container div{
  margin:1rem;
}
.container .A {
    width:100px;
    height: 80px;
    background: lightskyblue;
    margin-right:auto;
}

.container .B {
   
    width:100px;
    height: 80px;
    background:  lightgreen;
}

.container .C {
    width:100px;
    height: 80px;
    background: hotpink;
}

@media(max-width:768px){
  .container .C{
    order:-1;
    margin-right:auto;
  }
  .container .A{
     margin-right:1rem;
    
  }
}

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C </div>
</div>

【讨论】：

【解决方案3】：

我找到了一种解决方案。请尝试使用此代码。

  .container .A {
    float: left;
    width: 100px;
    height: 80px;
    background: lightskyblue;
  }

  .container .B {
    float: right;
    width: 100px;
    height: 80px;
    background: lightgreen;
  }

  .container .C {
    float: right;
    width: 100px;
    height: 80px;
    background: hotpink;
  }

  @media only screen and (max-width: 768px) {
    .container .A {
      float: right;
    }
    .container .C {
      float: left;
    }
  }

<div class="container">
  <div class="C">C</div>
  <div class="B">B</div>
  <div class="A">A</div>
</div>

最好的问候。

【讨论】：