Question

我正在尝试创建一个响应式布局，其中包含三个最大的列。在移动设备上，一切都将叠加在一起：

Stacked on mobile

在较大的位置会有两列。我希望第一个div位于第二列： two column

在最大的屏幕上，最后一个div将位于第三列和最顶部： enter image description here

我已经整理了一个codepen来演示我的内容，但我似乎无法让最后一个div在最大的屏幕上显示。

http://codepen.io/mikes000/pen/ceDEi

我试图避免使用flexbox或任何在IE9中不起作用的东西。同时避免绝对或相对定位来推送最后一个盒子，因为每个区域的内容长度会因页面而异，我不想遇到任何溢出问题。

有什么建议吗？

HTML：

<div class="main">


  <div class="breadcrumbs">
      asdf / asdf / asdf asdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdf
  </div>

  <div class="left-sidebar">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <h2>Pellentesque habitant morbi</h2>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>  
  </div>

  <div class="main-content">

      <div class="content-wrap">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
      </div>


  </div>
  <div class="right-sidebar">
    <h2>morbi tristique</h2>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>  
  </div>

</div>

CSS：

.main{
  width:100%;
  max-width:1000px;
  margin:auto;

  @media (min-width:400px) {
    .breadcrumbs{
      float:right;
       width:80%;
    }

    .left-sidebar{
      float:left;
      width:20%;
    }

    .main-content{
      width:80%;
      float:right;
    }
  }

  @media (min-width:700px) {
      .breadcrumbs{
        float:right;
        width:60%;
        margin-right:20%;

      }

      .main-content{
        width:100%;
        float:none;
      }
      .main-content{
        width:60%;
        float:left

      }
      .right-sidebar{
        width:20%;
        float:left;
      }
  }

}

.breadcrumbs{
   background-color:#FF9D5E;
}

.left-sidebar{
  background-color:#CEE7EA;
}

.main-content{
  background-color:#94BC6C;
}

.right-sidebar{
  background-color:#FEA9A1;
}

Answer 1

您的第一和第二个区块交换订单，您的第四个区块交换到第三个位置。所以从根本上说，你不能使用典型的响应式设计。但是，通过复制橙色和红色字段仍然可以解决问题。如果您使用的是模板系统，这实际上非常简单。

这样想：

block 1- orange1
block 2- blue
block 3- orange2
block 4- red1
block 5- green
block 6- red2

我的建议是重新设计页面以使用浏览器流程。但如果这是你给出的设计，那么这是一种接近它的方法：

你的html看起来像这样（假设是html5）

<nav class="orange1"></nav>
<section class="blue"></section>
<aside class="red1"></aside>
<nav class="orange2"></nav>
<section class="green"></section>
<aside class="red2"></aside>

你的css看起来像这样......

.orange1,.red2 {
    display:none;
}
.blue {
    float:left;
    width:200px;
}
.red1 {
    float:right;
    width:200px;
}
.orange2,.red2 {
    width:100%;
}

@media (max-width:700px;) {
    .red1 {
        display:none;
    }
    .red2 {
        display:block;
    }
}

@media (max-width:400px;) {
    .orange1 {
        display:block;
    }
    .orange2 {
        display:none;
    }
    .blue {
        float:none;
        width:100%;
    }
}

提供或接受一些错误，此代码仅供参考。

Answer 2

您是否尝试过使用Twitter bootstrap？它有自己的响应式api，允许你做这样的事情，而不需要你编写很多代码。加上它在IE9和其他浏览器上也是可以接受的。它可以帮助您构建三个预定义屏幕大小的响应式网站，您可以在css文件中按照自己的方式覆盖它们。您可以从以下站点获取引导程序： http://getbootstrap.com/

三列响应式布局，顶部div位于大屏幕中央

2 个答案: