时间戳

首页 > 解决方案 > 窗口调整大小时如何阻止元素移动？

html - 窗口调整大小时如何阻止元素移动？

问题描述

当我调整窗口大小时（将右侧拖动到右侧），绿线也会向右移动。换句话说，它开箱即用。无论调整窗口大小，我该怎么做才能使其留在框内？

.box {
  background-color: #000033;
  height: 500rem;
  position: absolute;
  left: 0;
  top: 0;
  width: 18rem;
}

hr {
  color: green;
  min-width: 187.5rem;
  position: fixed;
  right: 55.5rem;
  top: 6rem;
  width: 18rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
</head>
<link rel="stylesheet" type="text/css" href="portfolio.css">
</head>

<body>
  <div class="box"></div>
  <hr>
</body>

</html>

标签： htmlcss

解决方案

只需删除right它不会移动的属性

.box {
  background-color: #000033;
  height: 500rem;
  position: absolute;
  left: 0;
  top: 0;
  width: 18rem;
}

hr {
  background: red;
  color: green;
  width: 187.5rem;
  position: fixed;
  /*right: 55.5rem;*/
  top: 6rem;
  width: 18rem;
}
<div class="box"></div>
<hr>

推荐阅读