我正在尝试创建一个响应式布局,它有三个最大大小的列。在移动设备上,所有东西都会堆叠在一起:
大一点的有两列。我希望第一个div在第二列:
在最大的屏幕上,最后一个div将位于第三列和最顶部:
我已经组装了一个代码笔来演示我所拥有的东西,但我似乎无法让最后一个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;
}

最佳答案

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

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

给出或接受一些错误,此代码仅作为参考。

关于html - 三列响应式布局,大屏幕中间居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25432113/

10-12 12:20
查看更多