更改 div 元素的浮动行为答案

【问题标题】：Change float behaviour of div elements更改 div 元素的浮动行为
【发布时间】：2016-01-29 21:16:45
【问题描述】：

我有以下 div：

html：

<div class="side left">
    <span>left</span>
</div>
<div class="side right">  
    <span>right</span>
</div>

css：

.side 
{
  height: 100px;       
  width: 400px;
  float: left;
}
.left{ background-color: red;}
.right{ background-color: blue;}

小提琴：http://jsfiddle.net/39xn180y/

当我最小化浏览器窗口宽度时，它们会以这种方式浮动：

问题：有没有一种简单的（css）方法可以让它们以这种方式浮动，而无需更改 html：

【问题讨论】：

你想用 flexbox 代替 float 吗？
@NenadVracar - 只要我不需要更改 html 就可以了

标签： html css css-float

【解决方案1】：

您可以使用 Flexbox 和 媒体查询 来做到这一点。使用 flexbox，您可以更改 order of 元素，使用 @media 查询，您可以设置何时更改该顺序。这里是Fiddle

body {
  display: flex;
  margin: 0;
  padding: 0;
}

.side {
  height: 100px;
  flex: 0 1 400px;
}

.left{ background-color: red; text-align: center;}
.right{ background-color: blue; text-align: center;}

@media(max-width: 800px) {
  body {
    flex-wrap: wrap;
  }
  
  .left {
    order: 2;
  }
}

<div id="start" class="side left">
    <span>left</span>
</div>
<div id="end" class="side right">
    <span>right</span>
</div>

【讨论】：

【解决方案2】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
  .side 
{
  height: 100px;       
  width: 400px;
  float: left;
}
 @media screen and (max-width : 480px)
  {
           #blockContainer {
                               display: -webkit-box;
                               display: -moz-box;
                               display: box;
                              -webkit-box-orient: vertical;
                              -moz-box-orient: vertical;
                              box-orient: vertical;
                           }
#blockA {
    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     box-ordinal-group: 2;
}
#blockB {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
                  }
  </style>
  </head>
  <body>
    <div id="blockContainer">
    <div class="side" id="blockA" style="background:red;">Block A</div>
    <div class="side" id="blockB" style="background:blue;">Block B</div>

</div>
  </body>
</html>

【讨论】：

【解决方案3】：

我会坚持你使用CSS - Flex。对您的 CSS 和“HTML”进行少许更改（也）有助于实现您想要实现的目标。

我认为这可能会对您有所帮助：

Working Demo - UPDATE

HTML

<span class="xyzContainer">
  <div id="start" class="side left">
    <span>left</span>
  </div>
  <div id="end" class="side right">
    <span>right</span>
  </div>
</span>

注意：用span 包装你的两个div 作为它们两个的容器。

CSS

.xyzContainer
{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  margin:0px;
  padding:0px;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.side {
  height: 100px;
  width: 400px;
  float: left;
}

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

span {
  text-align: center;
  display: block;
  margin: 3px auto;
}

@media screen and (max-width: 815px) {
  .left
  {
    order: 2;
  }
}

注意：这里的技巧是由display:flex 完成的，它应用于具有order:2 到.left 类的容器。

【讨论】：

【解决方案4】：

您必须检查设备大小，然后更改浮动 css 属性
否则使用引导贪婪系统..

【讨论】：

怎么改变float css属性？你能给我看看代码吗？
@media screen and (max-width : 480px) { #divid { float:left !important; } }
你能更新小提琴吗？我不明白你的回答

【解决方案5】：

你可以使用弹性盒子

通过搜索，我发现这里也可以接受答案Change order of floated divs with CSS

“当你使用 flexbox 时，你可以使用项目的 order 属性来决定哪些订单项目出现在”

【讨论】：

【解决方案6】：

你可以使用display-flex属性来反转

这是它的css

body{
  display: flex; 
  flex-direction: column-reverse;
  display: -webkit-flex; 
  -webkit-flex-direction:column-reverse;
}

这是http://jsfiddle.net/w2ph516y/的小提琴

【讨论】：