Question

我正在尝试在HTML / CSS中实现Android风格的侧边栏，它会显示和隐藏自己。现在，我在CSS中试图找出right和left属性，试图弄清楚（在标题中措辞不是很好）如何将div（侧边栏）放置在左边的正确数量所以它完全被隐藏了。

一个例子：

+---+--------------+
|   |              |
| D |       B      |
|   |              |
+---+--------------+

（其中D是有问题的<div>，B是屏幕上的实际显示区域）

这可能吗？我已经尝试right: 100%，它基本上可以满足我的需求，但它不能与transition一起使用，因为它无法从right: 100%; left: auto转换为{ {1}}（或至少根据我的经验）......

非常感谢帮助！

编辑：我意识到我可以有一个恒定宽度的侧边栏，因此可以轻松转换，但我希望有一个侧边栏，宽度不是预先确定的（证据似乎指向JavaScript作为唯一的选择为了访问元素的宽度）

Answer 1

您是否考虑过将负值放入边距的事实？例如，如果您的div 50px 宽：

margin-left: -50px;

然后，您可以使用转换将50px添加到事件的左边距。

Answer 2

如果div是视口单位的设定宽度，则可以将其宽度的一半从50vw中减去，然后将其隐藏在负边距后将其放在中心。

body{
  margin:0px;
  padding:0px;
}

div{
  background:gray;
  height:75vh;
  width:25vw;
  margin-left:37.5vw; /*50-(25/2) ensures it is centered*/
  animation:slide 2s;
}

@keyframes slide{
  from {margin-left:-25vw;}
  to {margin-left:37.5vw;}
}

Answer 3

我发现我必须使用JavaScript来解决这个问题，因为用CSS似乎无法做到这一点。因此，元素的原始位置将是：

right: 100%;

我可以使用：

el.style.right = "calc(100% - " + el.offsetWidth);

......活跃时。或-webkit-transform。

将<div>的右侧放在窗口</div>的左侧

3 个答案: