html - 最小化窗口后 CSS 元素乱序

Question

我是 CSS 的新手，我已经创建了一个网站，但在完成整个工作后，我的所有 css 元素在屏幕上变得困惑，同时最小化了浏览器窗口。如何解决这个问题？我想我应该提供 % 值而不是像素值……但它也不起作用……请帮忙!有这个问题的样式表之一是...

.card-panel{
  transition: box-shadow .25s;
  padding: 20px;
  padding-left: 150px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #f0f8ff ;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  position:absolute;
  top: 100px;
  left: 300px;
  bottom:300px;
  right: 300px;
  font-family: calibri;
  font-size: 18px;
  color: #708090;
  z-index: 2;
}

body{
  background: #dcdcdc;
}

.profile{
  float: right;
  position: absolute;
  left: 50px;
  top: 33px;
  bottom:40px;
  padding-top: 0px;
  padding-left: 0px;
  border: 5px solid #708090;
}

.name{
  color: #3299cc;
  font-weight: bold;
  font-size: 30px;
  position: relative;
  top: 10px;
  left: 60px;
  font-family: cambria; 
}

.profession{
  color: #3299cc;
  font-size: 15px;
  position: relative;
  top: 16px;
  left: 60px;
  font-family: cambria;
}

span{
  color: #708090;
}

Answer 1

您应该尝试使用任何前端框架，如 bootstrap、foundation、skeleton、frame 等。这将解决您的问题。

正如您提到的，您是 css 新手，我强烈建议您使用 skeleton 或 frame