html - 三列响应式布局，在大屏幕上顶部 div 居中

Question

我正在尝试创建一个具有最大尺寸的三列的响应式布局。在移动设备上，所有内容都会堆叠在一起:

较大的会有两列。我希望第一个 div 位于第二列:

在最大的屏幕上，最后一个 div 将位于第三列和最顶部:

我已经整理了一个 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

您的第 1 和第 2 个 block 交换顺序，第 4 个 block 交换到第 3 个位置。所以从根本上说，你不能使用典型的响应式设计。然而，这个问题仍然可以通过复制你的橙色和红色字段来解决。如果您使用的是模板系统，这实际上非常简单。

可以这样想:

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

给出或接受一些错误，此代码仅供引用。