我试图解决flexbox问题,我想每行有三个div,首先大小相等,但是当悬停div时,该增长和其他的在同一行收缩。以为我已经解决了它,直到我尝试了多行。使弹性项目展开悬停,缩小其兄弟姐妹
我想要的是当悬停第三个div时,它会缩小第一个和第二个div,并保持其余不变。我无法弄清楚这一部分。
以下是我的单排工作解决方案。
此布局是否也可以在多行上工作?
我是否必须将每行包装在单独的容器中,还是有办法解决这个问题?
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box {
width: 33%;
flex: 1;
}
.box:hover {
flex-grow: 3;
}
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
你只想要第二列到悬停成长? – Kushtrim
说我有6个盒子的div(每行3行2列),我把第二个div悬停,我想第二个div扩大,div 1&3缩小,而div 4-6保持不变。 – yayheartbeat
这或多或少是不可能的,主要是因为你需要检测哪个行是histed元素,然后只在该行上增长/缩小元素,并且_previous sibling_没有选择器。 – LGSon