Fluid/fixed 侧边栏由两个项目组成的设计

Question

我正在尝试构建一个由三个主要块组成的移动就绪设计，广告块、内容块和侧边栏块（加上页眉和页脚，但这些对于这个问题并不重要）。

想法是让广告和侧边栏具有固定宽度 (250px) 并与容器块的右侧对齐，内容是流动的并位于左侧。在移动设备上，我需要打破这种设计并按顺序将块层叠在一起 ad->content->sidebar width 100% widths

我有这样的想法：

Desktop
Mobile

我见过使这项工作可行的解决方案，例如 this one，但它们都适用于以百分比表示的相对大小，而不是固定的 "sidebar" 宽度。

Answer 1

媒体查询允许您在某个 windows 尺寸下说我想要这个 css 到运行。例如：

.ads {
    float: right;
    width: 250px;
    margin-left: 5px;
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        margin: 0 auto;
    }
}

所以使用这个你可以根据屏幕大小控制css

示例：

http://jsfiddle.net/link2twenty/kufbbodr/

更改结果框的宽度以查看其工作原理

Answer 2

您需要在下面的代码中将媒体查询的宽度调整为您定义的移动尺寸。我设置为480px.

#ads,#content,#sidebar,parent{
 width:100%;
}
#ads{
  background:red;
  width:100%;
  position:relative;
 }
 #content{
  background:green;
  width:100%;
  position:relative;
 }
 #sidebar{
  background:blue;
  width:100%;
  position:relative;
 }
@media screen and (min-width: 480px){
 #ads{
  background:red;
  float:right;
  width:250px;
  position:relative;
 }
 #content{
  background:green;
  float:left;
  width:calc(100% - 250px);
  position:relative;
 }
 #sidebar{
  background:blue;
  float:right;
  width:250px;
  position:relative;
 }
}

<html>
<body>
<div id='parent'>
 <div id='ads'>
  ads
 </div>
 <div id='content'>
  <div>
   content1
  </div>
  <div>
   content2
  </div>
 </div>
 <div id='sidebar'>
 sidebar
 </div>
</div>
</body>
</html>

Answer 3

基本布局针对您的问题

<div class="container">
      <div class="ad">
      </div>
      <div class="main">
      </div>
      <div class="bottom_sub">
       </div>
    </div>

<style>
 .container{
 width:100%;
 margin-left:auto;
 margin-right:auto;
 }
.main{
    height:20em;
    width:calc(100% - 250px);
    width:-webkit-calc(100% - 250px);
    width:-moz-calc(100% - 250px);     
    float:left;
    background:red;
}
.ad{
    width:250px;
    float:right;
    background:green;
}
.bottom_sub{
    width:250px;
    float:right;
    background:blue;
}

@media screen and (max-width:467px){
.main{
    width:100%;
    background:red;
}
.ad{
    width:100%;
    background:green;
}
.bottom_sub{
    width:100%;
    background:blue;
}
}
</style>

Fluid/fixed 侧边栏由两个项目组成的设计

Fluid/fixed design with sidebar composed of two items

html

css

fluid-layout

responsive-design