定位然后使其响应

Question

嘿，我目前正在为学校制作响应式网页设计，这是一场灾难。目前正在设置网站，然后使其响应，文本和图像不会去我需要的地方。到目前为止，这是我对css的编码：

body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;

}

#page-wrap{
width: 950px;
margin: 0 auto;
}

#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;

}


#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;


}


h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}

h1{
position: absolute;
left: 0;
bottom: 0;
}

p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;

width: 450px;
height: 100%;

}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
 padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}

h3{
background-color: #ffa1ff;
color:white;
text-align: left;
 font-size: 20px;
 padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}

.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;


}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;



}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;


}

div{
height: 287;
width: 198;
}

模拟它的样子

Answer 1

在#containerIntro h1中，您不需要添加position：static，因为默认情况下已经设置了该位置。另外，如果元素是静态的，则完全忽略底部，顶部，左侧和右侧等方向属性。

尝试使用名为clear的属性并将其设置为两个...

p {
  clear: both;/*Element should have no other elements on the left and right side*/
}

明确：两者;摆脱元素左右两侧的浮动物体。我希望这有帮助！