我不确定这是否完全可行。我正在使用 display:grid 来构建我的页面布局，我知道我不能将 float 与网格项一起使用，但是我正在尝试操作其中的内容一个带有 float 的网格项，但似乎也不起作用。
我的布局基本上可以归结为:
<html>
<head>
<style>
.page-container{
display:grid;
grid-template-columns: 4fr .25fr;
grid-template-rows: repeat(3, 1fr);
height:100vh;
}
.menu{
grid-column: 2 / span 1;
grid-row: 2 / span 2;
}
</style>
</head>
<body>
<div class="page-container">
<div class="menu">
<div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
<div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
<div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
</div>
</div>
</body>
</html>
我想要发生的是，当用户将鼠标悬停在菜单 div 中的任何元素上时，我希望宽度过渡到 200px(或与容器无关的其他宽度)。我特别希望 div 的右边缘被锚定，以便宽度从右向左增长，而不是从左向右增长。这很容易通过使用 right: 0 来完成，但是这会导致网格列扩展，从而缩小第一列。相反，我希望 div 扩展到菜单容器的宽度之外，从而与整个网格中的第 1 列和第 2 列重叠。
有没有办法使用 CSS 和/或 JavaScript 来实现这一点？我更喜欢 CSS 解决方案，但两者都可以。
最佳答案
您可以使用负值为 margin-left 设置动画:
.page-container {
display: grid;
grid-template-columns: 4fr .25fr;
grid-template-rows: repeat(3, 1fr);
height: 100vh;
}
.menu {
grid-column: 2 / span 1;
grid-row: 2 / span 2;
}
.menu>div {
background-color: #000;
height: 50px;
margin-bottom: 25px;
transition:all 1s;
margin-left:0;
}
.menu>div:hover {
margin-left:-200px;
}<div class="page-container">
<div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</div>关于javascript - 使用网格布局和 float 从右到左展开 DIV 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51746885/