Question

我的模板上有两个侧边栏，桌面计算机上的输出将如下所示：

<!--sidebar one--><!--content--><!--sidebar two-->

喜欢 This Fiddle。这看起来就像我想要的那样。

我的桌面布局代码：

<div class="wrapper">
<div class="sidebar_one">Sidebar one</div>
<div class="content">This is a content</div>
<div class="sidebar_two">Sidebar two</div>
</div>

现在在手机上我想把我的两个侧边栏放在我的内容div下面。

所以输出看起来像这样：

<!--content-->
<!--sidebar one-->
<!--sidebar two-->

喜欢 This Fiddle

现在我的问题是我不知道如何在不改变我的HTML代码的情况下将我的侧边栏放在我的内容下面：

 <div class="wrapper">
 <div class="content">This is a content</div>
 <div class="sidebar_one">Sidebar one</div>
 <div class="sidebar_two">Sidebar two</div>
 </div>

很可能这在手机上看起来很棒，但在 dektop计算机上我的侧边栏仍然在我的内容div下。

所以我的问题是：是否有可能以某种方式调整我的第一个代码First Fiddle以显示我的内容，左边是一个侧边栏，另一个是右边的 dektop计算机 ，以及手机在我的内容下方显示我的两个侧边栏？

Answer 1

使用可以使用CSS3 flex执行此操作。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes。

因此，在您的移动设备的媒体查询中，您可以将元素转换为您想要的任何顺序。

所以在你的父元素上你有

   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;

您的移动媒体查询的子元素

-webkit-order: 1;
        order: 1;

在您的子元素上，您可以使用桌面媒体查询

-webkit-order: 3;
        order: 3;

唯一的问题是浏览器支持。但请检查非支持浏览器的polyfils。

我还添加了一个例子http://jsfiddle.net/UBb7j/3/

Answer 2

抬起头来！我已经解决了:)看起来必须使用我的布局：

<div class="wrapper">
<div class="content">This is a content</div>
<div class="sidebar_one">Sidebar one</div>
<div class="sidebar_two">Sidebar two</div>
</div>

我的移动设备CSS看起来像这样：

.sidebar_one{
display:block;
width:100px;
height:100px;
background-color:blue;
float:none;
text-align:center;
overflow:hidden;
}

.content{
display:inline-block;/*Notice the inline-block*/
width:100px;
height:100px;
background-color:red;
float:none;
text-align:center;
}
.sidebar_two{
display:block;
width:100px;
height:100px;
background-color:blue;
float:none;
text-align:center;
}

.wrapper{
display:block;
width:100px;
margin:0 auto;
}

这是The Fiddle。

桌面计算机的CSS代码如下所示：

 .sidebar_one{
 display:block;
 width:100px;
 height:100px;
 background-color:blue;
 float:right;
 text-align:center;
 overflow:hidden;
 }

 .content{
  display:inline-block;
  width:100px;
  height:100px;
  background-color:red;
  float:none;
  text-align:center;
  }
  .sidebar_two{
  display:block;
  width:100px;
  height:100px;
  background-color:blue;
  float:left;
  text-align:center;
  }
  .wrapper{
  display:block;
  width:300px;
  margin:0 auto;
  }

这是The Fiddle.
基本上解决方法是将inline-block添加到我的内容div中。
希望这会帮助其他人:)

如果是手机，在内容div下显示我的两个侧边栏？

2 个答案: