Позиционирование, а затем его реагирование

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, вам не нужно, чтобы добавить позицию: статические из-за к тому, что уже установлено по умолчанию. Плюс, если элемент статичен, свойства направления, такие как нижнее, верхнее, левое и правое, полностью игнорируются.

Попробуйте использовать свойство ясно и установить его как ...

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

ясно: как; избавляется от плавающих объектов как на левой, так и на правой сторонах элемента. Надеюсь, это поможет!