html - 3 列响应式布局变为 2 列布局，中心列在移动分辨率下移动到底部

Question

我需要知道当页面缩小到移动 View 时，是否有可能在左(固定像素宽度)和右(流动)列下方出现一个中心固定大小的列，从而变得流动到全宽父容器 div。

Bootstrap 库可用，但本例中的左列固定为精确的像素宽度。

此处示例:

Answer 1

我想这就是您要找的: http://codepen.io/anon/pen/xGzpKz

在 width 属性中使用 calc CSS3 函数可以帮助您完成通常必须使用 javascript 才能完成的事情。

在我发送给您的链接中，我只是将所有专栏放在一个包装器中。所有这些列都向左浮动，除了橙色的列向右浮动。这样一来，任何左侧的 float 元素都可以填充蓝色和橙色列之间的剩余空间。

然后我将我的橙色 div 宽度设置为:

width: calc(100% - (200px * 2))

200px 是一个固定宽度列的宽度。

然后，在移动设备上，我只是通过将宽度设置为 100% 告诉红色列返回它所属的位置，并告诉橙色列它的一侧只剩下一列。

@media screen and (max-width: 640px) {
  .wrapper{
    .column{
      float: left;
      &:nth-child(2){
        width: calc(100% - 200px);
      }
      &:last-child{
        width: calc(100%);
      }
    }
  }
}