2016-01-14 145 views
0

我在媒體查詢中的兩個兄弟div之間有間距問題。我無法弄清楚爲什麼有間隔。我的white-green div應該觸及arrow-box div的底部,但由於某種原因,它似乎white-green div正在從project-input-container中取得top: 100px;的效果。兩個div之間的間距問題

有沒有人知道爲什麼會發生這種情況?

這是什麼樣子:

enter image description here

HTNL

<div class="arrow_box"> 
    <div id="project-content-wrap"> 
    <div id="project-box-title1">KICK START YOUR</div> 
    <div id="project-box-title2">PROJECT</div> 
    <div id="project-box-description">We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.</div> 
    </div> 
</div> 

<div class="white-green"> 
    <form action="" autocomplete="on" class="project-input-container"> 
    <input type="text" class="input-borderless" placeholder="Your Name"> 
    <input type="text" class="input-borderless" placeholder="Title/Role"> 
    <input type="email" class="input-borderless" placeholder="Email Address"> 
    <input type="text" class="input-borderless" placeholder="Phone Number"> 
    <input type="text" class="input-borderless" placeholder="Company/URL"> 
    <input type="text" class="input-borderless" placeholder="How did you hear about us?"> 
    <input type="text" class="input-borderless" placeholder="Which of our social media influenced you the most?"> 
    <input type="text" class="input-borderless" placeholder="Human Test: What day comess after Thursday?"> 
    </form> 
</div> 

我正常的桌面代碼是這樣的:

.arrow_box { 
    position: relative; 
    background-color: rgb(69,186,149); 
    border: 4px solid rgb(69,186,149); 
     width: 33%; 
     height: 800px; 
     z-index: 99; 
} 
.arrow_box:after, .arrow_box:before { 
    left: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(255, 0, 0, 0); 
     border-left-color: rgb(69,186,149); 
    border-width: 40px; 
    margin-top: -40px; 
} 
.arrow_box:before { 
    border-color: rgba(0, 0, 0, 0); 
    border-left-color: rgb(69,186,149); 
    border-width: 26px; 
    margin-top: -26px; 
} 
#project-content-wrap { 
    margin: 30% 15%; 
} 
#project-box-title1 { 
    font-size: 1.3em; 
    color: #FFF; 
} 
#project-box-title2 { 
    font-size: 6.2em; 
    color: #FFF; 
    margin-top: 20px; 
} 
#project-box-description { 
    font-size: 1.3em; 
    color: #303030; 
    margin-top: 50px; 
    line-height: 1.6em; 
} 
/*-----Input div on project page----*/ 
.white-green { 
    background-color: rgb(241,250,247); 
    width: 66.56%; 
    height: 100%; 
    margin-left: 33%; 
    margin-right: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.project-input-container { 
    margin-top: 160px; 
    margin-left: 9%; 

} 
.input-borderless { 
    width: 80%; 
    border-top: 0px; 
    border-bottom: 1px solid green; 
    border-right: 0px; 
    border-left: 0px; 
    background-color: rgb(241,250,247); 
    text-decoration: none; 
    outline: none; 
    display: block; 
    padding: 10px 0; 
    margin: 20px 0; 
    font-size: 1.6em; 
} 

媒體查詢:

@media screen and (max-width:640px) { 
.arrow_box { 
    width: 100%; 
    height: 400px; 
} 
.arrow_box:after, .arrow_box:before { 
    top: 100%; 
    left: 50%; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: rgb(69,186,149); 
    border-width: 30px; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: rgb(69,186,149); 
    border-width: 36px; 
    margin-left: -36px; 
    margin-top: 0; 
} 
#project-content-wrap { 
    margin: 10% 5%; 
} 
#project-box-title1 { 
    font-size: 1.1em; 
    color: #FFF; 
} 
#project-box-title2 { 
    font-size: 3.2em; 
    color: #FFF; 
    margin-top: 20px; 
} 
#project-box-description { 
    font-size: 1.1em; 
    color: #303030; 
    margin-top: 40px; 
    line-height: 1.6em; 
} 
/*-----Input div on project page----*/ 
.white-green { 
    background-color: rgb(241,250,247); 
    width: 100%; 
    height: auto; 
    /*margin-top: -30px;*/ 
    margin-left: 0; 
    margin-right: 0; 
    margin-bottom: 0; 
    position: relative; 
    right: 0; 
    top: 0; 
} 
.project-input-container { 
    top: 100px; 
    left: 3%; 
    position: relative; 
} 
.input-borderless { 
    width: 90%; 
    border-top: 0px; 
    border-bottom: 1px solid green; 
    border-right: 0px; 
    border-left: 0px; 
    background-color: rgb(241,250,247); 
    text-decoration: none; 
    outline: none; 
    display: block; 
    padding: 10px 0; 
    margin: 20px 0; 
    font-size: 1.2em; 
} 
} 

回答

4

降低以下標記規則的值並查看。

.project-input-container { 
    top: 100px; /*this*/ 
    left: 3%; 
    position: relative; 
} 

.project-input-container { 
    margin-top: 160px; /*this*/ 
    margin-left: 9%; 
} 
+2

特別提示,如果你想的標題是「項目」的大小來響應,你可以視臺即'字體大小要這樣做:10vmin;'似乎是一個好一個。 – Stickers

+0

em對於響應速度沒有效率?出於某種原因,項目的標題只是一點點,這是爲什麼? – Paul

+2

http://stackoverflow.com/questions/15649244/responsive-font-size – Stickers

0

我認爲.arrow_box是很大的。將其更改爲高度:auto;

@media screen and (max-width:640px) { 
.arrow_box { 
    width: 100%; 
    height: auto; 
} 
0

有幾個問題。我用一些評論更新了你的CSS。結束時修復程序位於@media screen and (max-width:640px) {}

.arrow_box { 
 
    position: relative; 
 
    background-color: rgb(69,186,149); 
 
    border: 4px solid rgb(69,186,149); 
 
     width: 33%; 
 
     height: 800px; 
 
     z-index: 99; 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
    border-color: rgba(255, 0, 0, 0); 
 
     border-left-color: rgb(69,186,149); 
 
    border-width: 40px; 
 
    margin-top: -40px; 
 
} 
 
.arrow_box:before { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-left-color: rgb(69,186,149); 
 
    border-width: 26px; 
 
    margin-top: -26px; 
 
} 
 
#project-content-wrap { 
 
    margin: 30% 15%; 
 
} 
 
#project-box-title1 { 
 
    font-size: 1.3em; 
 
    color: #FFF; 
 
} 
 
#project-box-title2 { 
 
    font-size: 6.2em; 
 
    color: #FFF; 
 
    margin-top: 20px; 
 
} 
 
#project-box-description { 
 
    font-size: 1.3em; 
 
    color: #303030; 
 
    margin-top: 50px; 
 
    line-height: 1.6em; 
 
} 
 
/*-----Input div on project page----*/ 
 
.white-green { 
 
    background-color: rgb(241,250,247); 
 
    width: 66.56%; 
 
    height: 100%; 
 
    margin-left: 33%; 
 
    margin-right: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.project-input-container { 
 
    margin-top: 160px; 
 
    margin-left: 9%; 
 

 
} 
 
.input-borderless { 
 
    width: 80%; 
 
    border-top: 0px; 
 
    border-bottom: 1px solid green; 
 
    border-right: 0px; 
 
    border-left: 0px; 
 
    background-color: rgb(241,250,247); 
 
    text-decoration: none; 
 
    outline: none; 
 
    display: block; 
 
    padding: 10px 0; 
 
    margin: 20px 0; 
 
    font-size: 1.6em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
.arrow_box { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
    top: 100%; 
 
    left: 50%; 
 
} 
 

 
.arrow_box:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-top-color: rgb(69,186,149); 
 
    border-width: 30px; 
 
    margin-left: -30px; 
 
} 
 
.arrow_box:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-top-color: rgb(69,186,149); 
 
    border-width: 36px; 
 
    margin-left: -36px; 
 
    margin-top: 0; 
 
} 
 
#project-content-wrap { 
 
    margin: 10% 5%; 
 
} 
 
#project-box-title1 { 
 
    font-size: 1.1em; 
 
    color: #FFF; 
 
} 
 
#project-box-title2 { 
 
    font-size: 3.2em; 
 
    color: #FFF; 
 
    margin-top: 20px; 
 
} 
 
#project-box-description { 
 
    font-size: 1.1em; 
 
    color: #303030; 
 
    margin-top: 40px; 
 
    line-height: 1.6em; 
 
} 
 
/*-----Input div on project page----*/ 
 
.white-green { 
 
    background-color: rgb(241,250,247); 
 
    width: 100%; 
 
    height: auto; 
 
    /*margin-top: -30px; <==== remove this =====*/ 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    margin-bottom: 0; 
 
    position: relative; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
.project-input-container { 
 
    margin-top: 0; /* <==== add this =====*/ 
 
    /* top: 100px; <==== remove this =====*/ 
 
    left: 3%; 
 
    position: relative; 
 
} 
 
.input-borderless { 
 
    width: 90%; 
 
    border-top: 0px; 
 
    border-bottom: 1px solid green; 
 
    border-right: 0px; 
 
    border-left: 0px; 
 
    background-color: rgb(241,250,247); 
 
    text-decoration: none; 
 
    outline: none; 
 
    display: block; 
 
    padding: 10px 0; 
 
    margin: 20px 0; 
 
    font-size: 1.2em; 
 
} 
 
    
 
    /*===== add this =====*/ 
 
    .input-borderless:first-of-type { 
 
    margin-top: 0; 
 
    } 
 
}
<div class="arrow_box"> 
 
    <div id="project-content-wrap"> 
 
    <div id="project-box-title1">KICK START YOUR</div> 
 
    <div id="project-box-title2">PROJECT</div> 
 
    <div id="project-box-description">We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.</div> 
 
    </div> 
 
</div> 
 

 
<div class="white-green"> 
 
    <form action="" autocomplete="on" class="project-input-container"> 
 
    <input type="text" class="input-borderless" placeholder="Your Name"> 
 
    <input type="text" class="input-borderless" placeholder="Title/Role"> 
 
    <input type="email" class="input-borderless" placeholder="Email Address"> 
 
    <input type="text" class="input-borderless" placeholder="Phone Number"> 
 
    <input type="text" class="input-borderless" placeholder="Company/URL"> 
 
    <input type="text" class="input-borderless" placeholder="How did you hear about us?"> 
 
    <input type="text" class="input-borderless" placeholder="Which of our social media influenced you the most?"> 
 
    <input type="text" class="input-borderless" placeholder="Human Test: What day comess after Thursday?"> 
 
    </form> 
 
</div>