扩大div高度
我有以下8个方框。我的问题在于(min-width: 840px) and (max-width:960px)的视口代码，我已将其包含在代码段中。请在该视口中查看此内容。您将看到这些框将更改为4行，每列2列。当您将鼠标悬停在方框上时，您会看到方框向下移动到下一行，或者框下方有间隙。我无法弄清楚当悬停在一个盒子上时，如何使盒子的高度在悬停的盒子旁边增长，这样它就会与悬停盒子的高度相匹配，因此盒子不会被推下来。
我怎么能这样做？
.blue-box-container {
position: relative;
width: 100%;
margin: 0;
padding: 0;
/*height: 800px;*/
height: 100%;
}
.dark-blue-box, .light-blue-box {
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 {
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>
1 个答案:
答案 0 :(得分：2)
您可以使用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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？