gpt4 book ai didi

css - 使用转换后元素留下的空间

转载 作者:太空宇宙 更新时间:2023-11-04 09:16:56 24 4
gpt4 key购买 nike

假设我们有 10 个盒子。悬停在第 5 个框后,左边的移动 -81px(向左),右边的移动 81px(向右)。

因此,未变形的那个(我们悬停在上面的那个)仍然具有与之前相同的宽度,即使它的宽度设置为 100%。有人可以向我解释为什么不能从中间的元素使用转换元素留下的空间吗?

您可以在实际中看到它 here

//css:
.boxwrapper{
display:block;
>div{
display:inline-block;
border: solid 1px grey;
width:auto;
padding:20px;
background-color:white;
&.before{
transform:translateX(-20px);
}&.after{
transform:translateX(20px);
}
}
}

//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<div class="boxwrapper">
<div data-number="1" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 1</div>
<div data-number="2" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 2</div>
<div data-number="3" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 3</div>
<div data-number="4" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 4</div>
<div data-number="5" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 5</div>
</div>
</body>
</html>

谢谢。

最佳答案

转换 don't affect the flow的元素,只有视觉呈现。我知道 div 看起来应该有更多空间并且能够扩展,但实际上它没有。

关于css - 使用转换后元素留下的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41707087/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com