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

Question

我有一个经典的布局：

#divleft{
    float:left;
}

#sidebar{
    float:right;
}

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

divleft和sidebar是panelb的孩子;

现在我想使用网格

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

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

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中具有更高的特异性。