1
나는 한 시간 동안 google을 가지고 있으며 코드를 잘못 작성했습니다. 내 divs가 서로 위에 앉기를 원하지 않는 이유를 찾지 못하는 것 같습니다.Stop Div가 다른 Div의 아래로 이동하지 못하도록
하나의 div가 다른 하나의 아래에 앉아 있고 지금 당장 두뇌 방구를 느끼고 있습니다. 어떤 제안이라도 도움이 될 것입니다.
질문 다시 : 어떻게 모든 div가 다음 div 아래로가는 대신 다른 div의 내용을 푸시 다운하게합니까?
100 %의 높이를 추가하고이 문제가 해결됩니다 속성 https://codepen.io/livinglegendparagon/pen/wzWwya
/* BG */
body {
background-color: #000;
color: #000;
}
#bg {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1;
position: relative;
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
}
#PUTBACKGROUNDHERE, #PUTBACKGROUNDHERE2, #PUTBACKGROUNDHERE3, #PUTBACKGROUNDHERE4 {
background-color: #fff;
width: 100%;
position: relative;
height: 100%;
// min-height: -webkit-calc(100vh);
// min-height: -moz-calc(100vh);
// min-height: calc(100vh);
padding: 2.5% 0;
background-color: #fff;
display: block;
float: left;
clear: both;
@media (min-width: 280px) {
padding: 2.5% 5%;
}
}
#backGroundForViewWelcome {
background-color: white;
min-height: -webkit-calc(100vh);
min-height: -moz-calc(100vh);
min-height: calc(100vh);
}
.wrapper {
height: 100%;
width: 100%;
display: block;
}
.boxForServices {
position: relative;
height: 21.5vh;
margin: 3vh auto;
width: 100%;
color: white;
&:first-child {
margin-top: -webkit-calc(3vh + 40px);
margin-top: -moz-calc(3vh + 40px);
margin-top: calc(3vh + 40px);
}
&:last-child {
margin-bottom: -webkit-calc(3vh - 40px);
margin-bottom: -moz-calc(3vh - 40px);
margin-bottom: calc(3vh - 40px);
}
}
.boxForServicesTitle {
cursor: pointer;
position: relative;
text-align: center;
top: 50%;
border: red 5px solid;
background-color: blue;
border-radius: 5px;
margin: auto 5vh;
padding: 5vh 10%;
}
#sizeThisTextBoxForServices {
margin: 10% 10%;
width: 80%;
}
.centerBox {
margin: auto;
text-align: left;
}
.otherInput {
display: block;
width: 100%;
margin-bottom: 5%;
}