我正在将鼠标悬停时调整.main-partnersdiv中的卡片大小，以便出现see more按钮。
我的问题是当我:hover.main-partnersdiv 中的卡片 (.main-card( 时，下面.partners行中的divs被推下。
这不是我想要的效果。我希望在调整大小时所有卡片和div 都留在原位。
我花了整个上午的时间试图通过来回更改.css来解决这个问题。我现在没有希望了。
任何人都可以看看这个，看看我错过了什么。 这是小提琴的链接
下面是我的代码
.card {
border-radius: 0; }
.card .card-img-top {
border-radius: 0; }
@media (max-width: 767.98px) {
.card {
margin-top: 2vh; } }
.main-partners {
padding: 7px 0 40px; }
.main-partners .row {
margin-left: -8px;
margin-right: -8px; }
.main-partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px; }
.main-card {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
text-align: center;
color: inherit; }
.main-card .card-text {
color: #4b4b4b; }
.main-card .more-link {
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px; }
.main-card .more-link span {
color: #4b4b4b;
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray; }
.main-card .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: 0px;
padding-right: 4px; }
.main-card:hover {
margin: -11px 0px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.main-card:hover .more-link {
height: 31px; }
/* partners */
.partners {
padding: 7px 0 120px; }
.partners .row {
margin-left: -8px;
margin-right: -8px; }
.partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px; }
.partners .item {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
height: 137px;
text-align: center;
color: inherit; }
.partners .item figcaption {
font-size: 16px;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 2px 10px 8px; }
.partners .item .logo {
height: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center; }
.partners .item .logo img {
display: inline-block;
vertical-align: top;
max-height: 100%;
max-width: 100%; }
.partners .item .logo .text {
display: block;
font-size: 24px;
line-height: 34px;
font-weight: 500;
padding: 14px 0 0; }
.partners .item .more-link {
width: 142px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px; }
.partners .item .more-link span {
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray; }
.partners .item .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: -20px;
padding-right: 4px; }
.partners .item:hover {
margin: -11px -8px;
height: 159px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.partners .item:hover .more-link {
height: 31px; }
@media (max-width: 991px) {
.partners {
padding-bottom: 60px; } }
@media (max-width: 767px) {
.partners {
padding-bottom: 40px; } }
@media (max-width: 991px) {
.partners .row [class^="col-"] {
padding-bottom: 16px; } }
@media (max-width: 1219px) {
.partners .item figcaption {
font-size: 14px; } }
@media (max-width: 991px) {
.partners .item figcaption {
font-size: 16px; } }
@media (max-width: 767px) {
.partners .item figcaption {
font-size: 14px; } }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main-partners">
<div class="row flex-row">
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="partners">
<div class="row flex-row">
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
</div>
</div>
<!-- partners -->
<!-- / event-area -->
</div>您需要遵循与.partners相同的模式.main-partners。创建一个新div并在其中添加.main-partners。在带有.main-partners .card: hover的 CSS 中使用它并且它现在可以工作了。 这是小提琴链接
这是你所期待的吗？
.card {
border-radius: 0;
}
.card .card-img-top {
border-radius: 0;
}
@media (max-width: 767.98px) {
.card {
margin-top: 2vh;
}
}
.main-partners {
padding: 7px 0 40px;
}
.main-partners .row {
margin-left: -8px;
margin-right: -8px;
}
.main-partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px;
}
.main-card {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
text-align: center;
color: inherit;
}
.main-card .card-text {
color: #4b4b4b;
}
.main-card .more-link {
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px;
}
.main-card .more-link span {
color: #4b4b4b;
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray;
}
.main-card .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: 0px;
padding-right: 4px;
}
.card:hover {
margin: -11px 0px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.card:hover .more-link {
height: 31px;
}
/* partners */
.partners {
padding: 7px 0 120px;
}
.partners .row {
margin-left: -8px;
margin-right: -8px;
}
.partners .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px;
}
.partners .item {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
height: 137px;
text-align: center;
color: inherit;
}
.partners .item figcaption {
font-size: 16px;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 2px 10px 8px;
}
.partners .item .logo {
height: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
.partners .item .logo img {
display: inline-block;
vertical-align: top;
max-height: 100%;
max-width: 100%;
}
.partners .item .logo .text {
display: block;
font-size: 24px;
line-height: 34px;
font-weight: 500;
padding: 14px 0 0;
}
.partners .item .more-link {
width: 142px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px;
}
.partners .item .more-link span {
display: block;
padding: 7px 0 3px;
border-top: 1px solid lightgray;
}
.partners .item .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: -20px;
padding-right: 4px;
}
.partners .item:hover {
margin: -11px -8px;
height: 159px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.partners .item:hover .more-link {
height: 31px;
}
@media (max-width: 991px) {
.partners {
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.partners {
padding-bottom: 40px;
}
}
@media (max-width: 991px) {
.partners .row [class^="col-"] {
padding-bottom: 16px;
}
}
@media (max-width: 1219px) {
.partners .item figcaption {
font-size: 14px;
}
}
@media (max-width: 991px) {
.partners .item figcaption {
font-size: 16px;
}
}
@media (max-width: 767px) {
.partners .item figcaption {
font-size: 14px;
}
}
.col-sm-12 {
height: 150px;
}<div class="container main-partners">
<div class="row flex-row">
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-4">
<a href="#" class="main-card">
<div class="card">
<img class="card-img-top" src="#" alt="Card image cap">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
<footer class="more-link">
<span>See more</span>
</footer>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="partners">
<div class="row flex-row">
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner</strong>
</div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
<footer class="more-link">
<span>see more</span>
</footer>
</a>
</div>
</div>
</div>
<!-- partners -->
<!-- / event-area -->
</div>如果在悬停时删除此行，div 将不再跳:)
边距： -11px 0px;
所以它应该是：
.main-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
更新
为了修复合作伙伴悬停，我建议也删除与以前相同的 MARGIN 样式，将高度设置为悬停，而不是固定高度，使用 {height： auto} 和 {padding： 20px 0;}
请参阅下面的新类示例：
新 CSS
.partners .item {
height: auto;
padding: 20px 0;
}
代码笔链接在这里： https://codepen.io/CTBroon/pen/OJLXjLB
更新
修复： 如果要停止顶部将合作伙伴div 向下推，则需要为其周围的容器设置固定高度，以考虑悬停时的额外高度。
所以你想在不按其他div的情况下显示"显示更多"按钮， 这是小提琴链接
刚刚添加了一些 CSS 规则：
.main-card {
position:relative;
}
.more-link{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#fff;
}