css - 如何使用网格重新定位侧边栏

Question

我有一个经典的布局:

#divleft{
    float:left;
}

#sidebar{
    float:right;
}

@media screen and (max-width: 900px) {
    #divleft, #sidebar{
        float:none; 
}

divleft 和 sidebar 是 panelb 的 child ；

现在我想用网格

#panelb{
    width:calc(100% - 30px);
    margin:25px auto 0 auto;
    display:grid;
    grid-template-columns: auto 340px;
}

在这种情况下，如何在 900px 屏幕宽度上将 sidebar 重新定位到 divleft 下方？

Answer 1

最简单的方法就是对列使用媒体查询。

#panelb {
  width: calc(100% - 30px);
  margin: 25px auto 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
}

@media screen and (max-width: 900px) {
  #panelb {
    grid-template-columns: 1fr;
  }
}

#divleft {
  background: blue;
  height: 100px;
}

#sidebar {
  background: red;
  height: 100px;
}

<div id='panelb'>
  <div id='divleft'></div>
  <div id='sidebar'></div>
</div>

如果您想更改顺序，可以在#divleft 和#sidebar 上设置order 属性。

我还建议不要使用 id，而要使用类。即使对于只存在一次的元素也是如此，因为 id 具有一些其他奇怪的属性，例如“泄漏”到窗口以及在 css 中具有更高的特异性。