Question

我正在尝试将div旋转270度，然后将其放置在网页的最左侧。但是，即使我已确保所有边距都设置为0，该div与页面的侧面之间似乎总是存在间隙。我还注意到，随着您增加div的宽度（即，转换后的div的高度），间隙会增大，几乎就像div的属性完全没有被转换一样。这是什么，我该如何解决？

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
}
</style>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;width:200px;height120px;background-color:red;transform:rotate(270deg);"><h1>test</h1></div>
</body>
</html>

Answer 1

如果将左侧设置为-40，则可以使用。您必须在调整div宽度tho的大小时进行数学运算并进行调整。

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
}
</style>
</head>
<body>
<div style="position:absolute;
            top:0px;
            left:-40px;
            width:200px;
            height:120px;
            background-color:red;
            transform:rotate(270deg);
            ">
            <h1>test</h1></div>
</body>
</html>

如何将转换后的div放置在网页的左边缘旁边？

1 个答案: