更改 div 个元素的浮动行为

Question

我有以下 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;}

fiddle: http://jsfiddle.net/39xn180y/

当我最小化我的浏览器-window 宽度时，它们会这样浮动：

问题：有没有简单的（css）方法让它们在不改变 html:

的情况下漂浮

Answer 1

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

Answer 2

你可以使用弹性框

通过搜索我发现这个也被接受的答案Change order of floated divs with CSS

"When you use flexbox you can use the order property on items to dictate which order items appear in"

Answer 3

您可以使用 Flexbox 和 Media Queries 来做到这一点。使用 flexbox 你可以改变 order of elements and with @media queries you can set when to change that order. Here is 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>

Answer 4

我会坚持让你使用 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>

Note : Wrapped your both div's with span as container for both of them.

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;
  }
}

Note : The trick here is done by the display:flex that applied to container with order:2 to .left class.

Answer 5

<!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>

Answer 6

可以用display-flex属性来反转

这是 css 个

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

这是 http://jsfiddle.net/w2ph516y/

的 fiddle

更改 div 个元素的浮动行为

Change float behaviour of div elements

html

css

css-float