Question

我有一个列布局，其中几个div垂直堆叠。然而，最顶层的div应移动到第二列，并在屏幕足够宽时具有固定位置。

目前我在这个小提琴中使用的东西： https://jsfiddle.net/L3u3xqdu/1/

HTML：

<div class="red">
</div>
<div class="blue">
</div>

的CSS：

.red {
  background-color: red;
  width: 400px;
  height: 400px;  
}
@media screen and (min-width: 900px) {
  .red {
    position: fixed;
    left: 500px;
  }
}
.blue {
  background-color: blue;
  width: 400px;
  height: 2000px;
}

我的问题是：是否有一个更具伸缩性的解决方案，不需要知道列的宽度来硬编码固定div的位置？每次我向一列添加内容时，我必须调整该偏移量。我正在寻找一些CSS魔法或者我可以使用的小框架或库。

我使用的其他库是：react，stylus，lodash，jquery，normalize.css

Answer 1

https://jsfiddle.net/u09dpgot/

额外的包装div：

<div class="colwrap">
  <div class="red">

  </div>
  <div class="blue">

  </div>
</div>

flex css（命令在浏览器中直观地更改html元素的顺序）：

.colwrap {
  display:flex;
  flex-wrap:wrap;
}

.red,
.blue {
  flex:0 0 400px;
}

.red {
  background-color: red;
  height: 400px;  
}

.blue {
  background-color: blue;
  height: 2000px;
}

@media screen and (min-width: 900px) {
  .red {
    order:2;
  }

  .blue {
    order:1;
  }
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在大屏幕上可扩展放置固定位置div

1 个答案: