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

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

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

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

Answer 1

您可以使用 Flexbox 和媒体查询执行此操作。使用flexbox，您可以更改order 元素，并使用@media查询设置何时更改该订单。这是Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我会坚持要你使用CSS - Flex。对你的CSS和＆＃34; HTML＆＃34;（也）的小改变有助于你想要实现的目标。

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

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

注意：将div两个span用.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; } }作为容器包装。

<强> CSS

display:flex

注意：此处的诀窍是应用于order:2到.left类的容器的#include <vector> #include <iterator> #include <iostream> #include <list> #include <string> #include <array> #include <map> template<typename T> struct has_const_iterator { private: typedef char yes; typedef struct { char array[2]; } no; template<typename C> static yes test(typename C::const_iterator*); template<typename C> static no test(...); public: static const bool value = sizeof(test<T>(0)) == sizeof(yes); typedef T type; }; template <typename T> struct has_begin_end { template<typename C> static char (&f(typename std::enable_if< std::is_same<decltype(static_cast<typename C::const_iterator (C::*)() const>(&C::begin)), typename C::const_iterator(C::*)() const>::value, void>::type*))[1]; template<typename C> static char (&f(...))[2]; template<typename C> static char (&g(typename std::enable_if< std::is_same<decltype(static_cast<typename C::const_iterator (C::*)() const>(&C::end)), typename C::const_iterator(C::*)() const>::value, void>::type*))[1]; template<typename C> static char (&g(...))[2]; static bool const beg_value = sizeof(f<T>(0)) == 1; static bool const end_value = sizeof(g<T>(0)) == 1; }; template<typename T> struct is_container : std::integral_constant<bool, has_const_iterator<T>::value && has_begin_end<T>::beg_value && has_begin_end<T>::end_value> {}; template<typename T> void dumpSingle(T const& cont) { std::copy(cont.cbegin(), cont.cend(), std::ostream_iterator<typename T::value_type>(std::cout, " ")); std::cout << "\n"; } template <typename T, bool U> class Dump { public: static void dump(T const& cont) { dumpSingle<decltype(cont)>(cont); } }; template<typename T> class Dump<T, false> { public: static void dump(T const& val) { std::cout << val << "\n"; } }; template<typename T> void dumpPair(T const& cont) { for (auto pair : cont) { std::cout << "[" << pair.first << "]: "; Dump<decltype(pair.second), is_container<decltype(pair.second)>::value>::dump(pair.second); } } int main(int argc, char const *argv[]) { std::vector<int> vec = {2, 4, 42, 0, 7}; dumpSingle<decltype(vec)>(vec); std::array<int, 3> arr = {1, 7, 5}; dumpSingle<decltype(arr)>(arr); std::list<std::string> l = {"toto", "tutu", "titi"}; dumpSingle<decltype(l)>(l); std::map<std::string, int> map; map["yop"] = 42; map["test"] = 25; dumpPair<decltype(map)>(map); std::map<std::string, std::array<int, 3>> map2; map2["yop"] = {42, 258, 72}; map2["test"] = {77, 42, 21}; dumpPair<decltype(map2)>(map2); // error here return 0; }。

Answer 3

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

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

Answer 5

您可以使用弹性框

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

“当您使用flexbox时，您可以使用项目的订单属性来指示哪些订单商品出现在”

中

Answer 6

您可以使用display-flex属性进行反转

这是css的那个

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

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

的小提琴

更改div元素的浮动行为

6 个答案: