我有一个可以滑动打开的边栏。将我的内容放在它旁边以便侧边栏推送(不重叠)我的内容的最佳方式是什么？请记住，我计划使页面响应。
.centercontent div 代表我 future 的内容；我希望它直接位于侧边栏的左侧。
http://codepen.io/anon/pen/ZQOPav
<body>
<input type="checkbox" id="sidebartoggler" name=" " value="" />
<div class="page-wrap">
<label for="sidebartoggler" class="toggle">☰</label>
<div class="side-content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="centercontent"></div>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS:
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;
}
最佳答案
鉴于您的布局，我将使用与您用于侧边栏的完全相同的隐藏复选框触发器。我会向 .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 */
}
如果您希望内容不改变宽度，而是从字面上推到一边，使其部分隐藏在屏幕之外，您可以省略宽度线。
关于html - 将 div 放置在此滑动侧边栏旁边的最佳方式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34429610/