Question

我不确定这是否完全可能。我正在使用display:grid构建页面布局，并且我知道不能将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>

CodePen Example

我想发生的事情是，当用户将鼠标悬停在菜单div中的任何项目上时，我希望宽度过渡到200px（或与容器无关的其他宽度）。我特别希望锚定div的右边缘，以使宽度从右到左而不是从左到右增大。使用right: 0可以很容易地做到这一点，但是这也会导致网格列也扩展，从而缩小了第一列。相反，我希望div扩展到菜单容器宽度之外，从而使整个网格中的列1和列2重叠。

是否有一种使用CSS和/或JavaScript实现此目标的方法？我更喜欢CSS解决方案，但两者都可以。

Answer 1

您可以使用负值为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>

使用网格布局从右向左展开DIV元素并浮动

1 个答案: