0

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

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

就像在这个小提琴中一样。这看起来正是我想要的。

我的桌面布局代码：

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

就像在这个小提琴

中一样现在我的问题是我不知道如何在不将我的 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>

显然这在手机上看起来很棒，但在台式电脑上，我的侧边栏仍将位于我的内容 div 下。

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

4

2 回答 2

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/

于 2013-09-18T12:57:58.660 回答
0

小心！我已经解决了:) 看起来必须像这样使用我的布局：

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

这是小提琴。

我的台式机 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;
  }

这是小提琴。
基本上解决方案是添加inline-block到我的内容 div。
希望这对其他人有帮助:)

于 2013-09-18T18:13:33.333 回答