最小化窗口后CSS元素混乱

时间:2015-08-20 17:50:28

标签: html css

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

.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;
}

1 个答案:

答案 0 :(得分:-1)

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

如你所说,你是css的新手,我强烈建议你使用骨架或frame