Question

我需要定位三个正方形Pythagoras' Theorem picture，以在中间创建一个直角三角形，并且需要它们始终保持这种排列，以调整浏览器的大小）而不会重叠或分开。现在，我为每个正方形使用position：fixed，并使用百分比放置它们。

有更好的方法吗？谢谢

对于使用5x5正方形的即时通讯

#five div {
position:relative;
height: 54px;
width: 54px;
border: 1px dashed gray;
display: inline-block;
margin: 0;
}

#five {
width:300px;
height:300px;
background:yellow;
border:5px solid yellow;
margin:auto;
transform: rotate(30deg);
padding: 5px;
position: fixed;
top:20%;
left: 50%;
}

3x3深蓝色正方形

#three {
width: 150px;
height: 150px;
border: 5px solid blue;
padding: 5px;
position: fixed;
top:48%;
left: 33%;
}

4x4浅蓝色正方形

#four {
width: 260px;
height: 260px;
border: 5px solid lightblue;
margin-top: 5px;
padding: 5px;
position: fixed;
top:69%;
left: 45%;

Answer 1

position:fixed相对于浏览器窗口。因此，如果您使用百分比并修改窗口大小，则会得到奇怪的结果。

position: absolute相对于具有指定位置的下一个父元素（默认为<body>）。

请考虑将父元素设置为position: relative，并使用百分比或固定单位将项目绝对放置在其中。

可以使用rotate()函数之类的CSS转换来完成旋转。

定位旋转正方形

1 个答案: