Question

我有一个侧滑杆滑开。将我的内容放在旁边的最佳方法是什么，以便侧边栏推送（不重叠）我的内容？请记住，我打算让页面响应。

.centercontent div代表我未来的内容;我希望它直接位于侧边栏的左侧。

body{
  padding:0px;
  margin:0px;
}
.box{
    width:200px;
    height:200px;

    border:dotted 1px black;
    display:inline-block;}

.side-content{
    position:relative;
    z-index:1;
    background-color:pink;
    transition: .2s ease;
    height:800px;
    width:170px;
}

.toggle{
    text-decoration:none;
    font-size:30px;
    color:black;
    transition: .2s ease;
    position:fixed;
    top:20px;
    left:20px;
    z-index:2;

}

.sidebar{
    position:fixed;
    top:0px;
    bottom:0px;
    left: 0px;
    width:120px;
    padding:30px;
    background:#333;
    z-index:0;
}

li{
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    font-size:16px;
    margin-bottom:16px;
    -webkit-font-smoothing: atialiased;
    cursor: pointer;
}

li:hover{
    color: rgba(255,255,255,1);
}

#sidebartoggler{
    display:none;
}

#sidebartoggler:checked + .page-wrap .toggle{
    left: 200px;
}

#sidebartoggler:checked + .page-wrap .side-content{
    margin-left: 172px;
    padding-top:200px;
}

.centercontent{
      bottom:200px;
      border:dotted 3px black;
      margin-left:250px;
      height:900px;
      width:600px;
    }

CSS：

{{1}}

Answer 1

根据您的布局，我使用完全相同的隐藏复选框触发器，您将其用于侧边栏。我会在.centercontent中添加宽度和边距过渡，以便在侧边栏移动时缩小/推动它以占用更多空间。

类似的东西：

.centercontent{
  bottom:200px;
  border:dotted 3px black;
  margin-left:250px;
  height:900px;
  width:800px;
  transition: marign-left .2s ease, width: .2s ease; /* Transition margin and width */
}

#sidebartoggler:checked ~ .page-wrap .centercontent {
  margin-left: 422px; /* 250 + 172 */
  width: 628px; /* 800 - 172 */
}

如果您希望内容不会改变宽度，但实际上要将其推离侧面以使其部分隐藏在屏幕外，您可以忽略宽度线。

在这个滑动侧边栏旁边放置div的最佳方法是什么？

1 个答案: