擴大div的高度

我有以下一組8盒。我的問題在於我已經包含在代碼片段中的(min-width: 840px) and (max-width:960px)的視口代碼中。請在該視口中查看它。您會看到這些框將變爲4列2列。當您將鼠標懸停在方框上時，您會看到方框移到下一行或方框下方有間隙。我無法弄清楚當它懸停在一個盒子上時，如何使盒子的高度與懸掛盒子的高度一致，因此它與盒子的高度相匹配，所以盒子不會被推下。擴大div的高度

我該怎麼做？

.blue-box-container { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t /*height: 800px;*/ 
 
\t height: 100%; 
 
} 
 
.dark-blue-box, .light-blue-box { 
 
\t height: 50%; 
 
\t width: 25%; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t transition: all .8s ease-in-out; 
 
} 
 
.dark-blue-box{ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box { 
 
\t background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:hover, .light-blue-box:hover { 
 
\t background-color: #a10085; 
 
\t cursor: pointer; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap { 
 
\t padding: 8% 12%; 
 
} 
 
.dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img { 
 
\t height: 86px; 
 
\t width: 86px; 
 
} \t 
 
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title { 
 
\t color: #FFF; 
 
} 
 
.dark-blue-box:hover .box-description, .light-blue-box:hover .box-description { 
 
\t display: none; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t color: #FFF; 
 
\t font-size: 1.5em; 
 
\t padding-top: 20px; 
 
} 
 
.insideBoxWrap { 
 
\t /*padding: 150px 18%;*/ 
 
\t padding: 30% 18%; 
 
} 
 
.box-title { 
 
\t color: #307382; 
 
\t font-size: 3em; 
 
} 
 
.box-description { 
 
\t padding-top: 15px; 
 
\t color: #307382; 
 
\t font-size: 1.6em; 
 
} 
 
.box-description-hover { 
 
\t display: none; 
 
} 
 
.dark-blue-box:nth-child(5), .dark-blue-box:nth-child(7){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:nth-child(5):hover, .dark-blue-box:nth-child(7):hover{ 
 
\t background-color: #a10085; 
 
} 
 
.light-blue-box:nth-child(6), .light-blue-box:nth-child(8){ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6):hover, .light-blue-box:nth-child(8):hover{ 
 
\t background-color: #a10085; 
 
} 
 

 

 
@media screen and (min-width: 840px) and (max-width:960px) { 
 

 
.blue-box-container { 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 
.dark-blue-box, .light-blue-box { 
 
\t height: 33%; 
 
\t width: 50%; 
 
\t display: inline-block; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t font-size: 1.1em; 
 
\t padding-top: 10px; 
 
} 
 
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover { 
 
\t display: block; 
 
\t font-size: 1.1em; 
 
\t padding-top: 3%; 
 
\t clear: both; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap { 
 
\t padding: 3% 6%; 
 
} 
 
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title { 
 
\t padding-top: 7%; 
 
} 
 
.dark-blue-box:nth-child(3){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.light-blue-box:nth-child(4){ 
 
\t background-color: #45a5ba; 
 
} 
 
.dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{ 
 
\t background-color: purple; 
 
} \t 
 
.dark-blue-box:nth-child(5){ 
 
\t background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6){ 
 
\t background-color: #8fc9d6; 
 
} 
 
.insideBoxWrap { 
 
\t padding: 10% 30px; 
 
} 
 
.box-title { 
 
\t font-size: 2em; 
 
} 
 
.box-description { 
 
\t padding-top: 5px; 
 
\t font-size: 1.1em; 
 
} 
 
    }

<div class="blue-box-container"><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/screen6.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Brand Strategy</div> 
 
\t \t \t \t <div class="box-description">Digital Roadmap</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/web2.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Development</div> 
 
\t \t \t \t <div class="box-description">That Outperforms</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/tie13.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Visual Identity</div> 
 
\t \t \t \t <div class="box-description">That Is Timeless</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/hand256.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Interactivity</div> 
 
\t \t \t \t <div class="box-description">For Engagement</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/windows10.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Responsive</div> 
 
\t \t \t \t <div class="box-description">Web Layout</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/gear49.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Ecommerce</div> 
 
\t \t \t \t <div class="box-description">Conversion Focused</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="dark-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/news1.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Dynamic</div> 
 
\t \t \t \t <div class="box-description">Functionality</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div><div class="light-blue-box fadeBlock"> 
 
\t \t \t <div class="insideBoxWrap"> 
 
\t \t \t \t <div class="home-icon"><img src="/icons/conversion.png" alt=""></div> 
 
\t \t \t \t <div class="box-title">Conversion</div> 
 
\t \t \t \t <div class="box-description">Increase Results</div> 
 
\t \t \t \t <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs 
 
\t \t \t \t fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t </div>

來源

2016-03-07 Paul

，因爲你是在懸停箱增加填充需要額外的空間，然後，因爲沒有足夠的空間它適合在 –

@Reddy右另一個向下移動，但無論如何要調整其他箱子，當這種情況發生？ – Paul

我認爲你在 –

您可以使用display:flex和min-height代替height。

.blue-box-container { 
 
    position: relative; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*height: 800px;*/ 
 
    min-height: 100%; 
 
} 
 
.dark-blue-box, 
 
.light-blue-box { 
 
    min-height: 50%; 
 
    width: 25%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0; 
 
    margin: 0; 
 
    transition: all .8s ease-in-out; 
 
} 
 
.dark-blue-box { 
 
    background-color: #45a5ba; 
 
} 
 
.light-blue-box { 
 
    background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:hover, 
 
.light-blue-box:hover { 
 
    background-color: #a10085; 
 
    cursor: pointer; 
 
} 
 
.dark-blue-box:hover .insideBoxWrap, 
 
.light-blue-box:hover .insideBoxWrap { 
 
    padding: 8% 12%; 
 
} 
 
.dark-blue-box:hover .home-icon img, 
 
.light-blue-box:hover .home-icon img { 
 
    height: 86px; 
 
    width: 86px; 
 
} 
 
.dark-blue-box:hover .box-title, 
 
.light-blue-box:hover .box-title { 
 
    color: #FFF; 
 
} 
 
.dark-blue-box:hover .box-description, 
 
.light-blue-box:hover .box-description { 
 
    display: none; 
 
} 
 
.dark-blue-box:hover .box-description-hover, 
 
.light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    color: #FFF; 
 
    font-size: 1.5em; 
 
    padding-top: 20px; 
 
} 
 
.insideBoxWrap { 
 
    /*padding: 150px 18%;*/ 
 
    padding: 30% 18%; 
 
} 
 
.box-title { 
 
    color: #307382; 
 
    font-size: 3em; 
 
} 
 
.box-description { 
 
    padding-top: 15px; 
 
    color: #307382; 
 
    font-size: 1.6em; 
 
} 
 
.box-description-hover { 
 
    display: none; 
 
} 
 
.dark-blue-box:nth-child(5), 
 
.dark-blue-box:nth-child(7) { 
 
    background-color: #8fc9d6; 
 
} 
 
.dark-blue-box:nth-child(5):hover, 
 
.dark-blue-box:nth-child(7):hover { 
 
    background-color: #a10085; 
 
} 
 
.light-blue-box:nth-child(6), 
 
.light-blue-box:nth-child(8) { 
 
    background-color: #45a5ba; 
 
} 
 
.light-blue-box:nth-child(6):hover, 
 
.light-blue-box:nth-child(8):hover { 
 
    background-color: #a10085; 
 
} 
 
@media screen and (min-width: 840px) and (max-width: 960px) { 
 
    .blue-box-container { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
    .dark-blue-box, 
 
    .light-blue-box { 
 
    min-height: 33%; 
 
    width: 50%; 
 
    display: inline-block; 
 
    } 
 
    .dark-blue-box:hover .box-description-hover, 
 
    .light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    font-size: 1.1em; 
 
    padding-top: 10px; 
 
    } 
 
    .dark-blue-box:hover .box-description-hover, 
 
    .light-blue-box:hover .box-description-hover { 
 
    display: block; 
 
    font-size: 1.1em; 
 
    padding-top: 3%; 
 
    clear: both; 
 
    } 
 
    .dark-blue-box:hover .insideBoxWrap, 
 
    .light-blue-box:hover .insideBoxWrap { 
 
    padding: 3% 6%; 
 
    } 
 
    .dark-blue-box:hover .box-title, 
 
    .light-blue-box:hover .box-title { 
 
    padding-top: 7%; 
 
    } 
 
    .dark-blue-box:nth-child(3) { 
 
    background-color: #8fc9d6; 
 
    } 
 
    .light-blue-box:nth-child(4) { 
 
    background-color: #45a5ba; 
 
    } 
 
    .dark-blue-box:nth-child(3):hover, 
 
    .light-blue-box:nth-child(4):hover { 
 
    background-color: purple; 
 
    } 
 
    .dark-blue-box:nth-child(5) { 
 
    background-color: #45a5ba; 
 
    } 
 
    .light-blue-box:nth-child(6) { 
 
    background-color: #8fc9d6; 
 
    } 
 
    .insideBoxWrap { 
 
    padding: 10% 30px; 
 
    } 
 
    .box-title { 
 
    font-size: 2em; 
 
    } 
 
    .box-description { 
 
    padding-top: 5px; 
 
    font-size: 1.1em; 
 
    } 
 
}

<div class="blue-box-container"> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/screen6.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Brand Strategy</div> 
 
     <div class="box-description">Digital Roadmap</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/web2.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Development</div> 
 
     <div class="box-description">That Outperforms</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/tie13.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Visual Identity</div> 
 
     <div class="box-description">That Is Timeless</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/hand256.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Interactivity</div> 
 
     <div class="box-description">For Engagement</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/windows10.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Responsive</div> 
 
     <div class="box-description">Web Layout</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/gear49.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Ecommerce</div> 
 
     <div class="box-description">Conversion Focused</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="dark-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/news1.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Dynamic</div> 
 
     <div class="box-description">Functionality</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
    <div class="light-blue-box fadeBlock"> 
 
    <div class="insideBoxWrap"> 
 
     <div class="home-icon"> 
 
     <img src="/icons/conversion.png" alt=""> 
 
     </div> 
 
     <div class="box-title">Conversion</div> 
 
     <div class="box-description">Increase Results</div> 
 
     <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-03-07 15:56:27

以下得到了正確的答案你所做的全部是'display：flex; flex-wrap：wrap;'和'min-height：100％;'到'blue-box-container'？我試過這個，因爲我沒有看到其他任何不同的東西，它似乎不像你的那樣工作。我在我的問題中添加了一張圖片。 – Paul

@Paul在媒體查詢中我把高度也變成了最小高度:) –

@Paul在1696行左右你沒有把高度變成最小高度...... :(做完整的編輯/修改:)因爲它看起來像你做的不是在媒體詢問 –

擴大div的高度

回答

相關問題