我正在尝试(通过我自己,学习的目的)一个滑动,固定位置的侧面菜单div。我想让它响应不同的视口尺寸。响应式固定位置侧div
我有一个问题,虽然:在容器div
我有2个其他div
s时,左(A)一个具有CSS-旋转的文本(在span
),右(B)一个有3个复选框input
s和文字,每个文字都包含span
。喜欢的东西:
container (w/ padding)
+----------------------+
| +---+ +----------+ |
| | A | | B | |
| +---+ +----------+ |
+----------------------+
编辑:
例如,如果视口的增长,它应该是更象:
container (w/ padding)
+---------------------------+
| +---+ +---------------+ |
| | | | | |
| | | | | |
| | | | | |
| | A | | B | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +---+ +---------------+ |
+---------------------------+
请注意,填充不需要改变和A div的宽度也没有变化(只有它的高度)。什么改变了总容器宽度,高度和B div的宽度和高度,以及复选框的字体大小。
/EDIT
我想做到的是具有容器的右侧拿出来看,滚动到视图中单击左侧的div时。用于滑动目的的jQuery位现在不会让我感到困扰,我只是想在得到响应位(大小,边距,字体大小)之前弄清楚它。
问题:旋转后的文本生病了,填充没有正确显示。我在这里错过了什么?
这是我迄今为止(以下代码片段):
.outer-wrapper{
\t height: 100vh;
\t width: 100vw;
overflow: hidden;
position: fixed;
\t background: transparent;
}
.container{
position: fixed;
width: 25vw;
height: 40vh;
top: 30vh;
right: 0;
background: #222;
color: #FFF;
padding: 20px;
}
.left{
width: 20%;
\t -webkit-transform: rotate(-90deg);
\t -moz-transform: rotate(-90deg);
\t -ms-transform: rotate(-90deg);
\t -o-transform: rotate(-90deg);
\t transform: rotate(-90deg);
}
.right{
position: absolute;
width: 80%;
left: 20%;
}
<div class="outer-wrapper">
<div class="container">
<div class="left">
<span>Menu</span>
</div>
<div class="right">
<span><input type="checkbox" checked autocomplete="off"> Checkbox1</span><br>
<span><input type="checkbox" checked autocomplete="off"> Checkbox2</span><br>
<span><input type="checkbox" checked autocomplete="off"> Checkbox3</span>
</div>
</div>
</div>
血腥的辉煌!另一个细节:你如何使文本响应? '字体大小'的'em'措施?我希望文字大小可以很好地与桌面/移动视口配合使用,而不会过度生长和/或太小。 – Joum
此外,是否可以使用相同的技术将复选框放置在其父项的垂直中心? – Joum
你可以,如果你想。在Stack Overflow上快速搜索,你可以找到很多关于垂直居中的选项。 –