Question

假设我有12个元素width: 25%; float: left;，它将是这样的：

---------
|a|b|c|d|
---------
|e|f|g|h|
---------
|i|j|k|l|
---------

我已将overflow: visible;添加到这些div中，并且每个div中都有一个div，它将在悬停时展开。它工作正常。问题是我希望它扩展到除d，h和l之外的所有div，它们应该扩展到左边。我想知道如果没有javascript可以做到这一点。是否有任何css选择器可以选择d，h和l（考虑到它的响应速度，并且每行不总是4个div。可能是每行10或2行。）或者，如果没有上述选择器，可能还有另一种解决此选择性扩展问题的方法。

Answer 1

您有一个 flexbox 解决方案。选择更好的值以获得所需的输出。

ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}
li{
  padding: 20px;
  margin: 5px;
  background-color: #8056ff;
  color: white;
  text-align: center;
  flex-basis: 40px;
  transition: flex-basis 1s;
}
li:hover{
  flex-basis: 100px;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  <li>i</li>
  <li>j</li>
  <li>k</li>
  <li>l</li>
</ul>

浮动div中最后一列的选择器

1 个答案: