所以我有一个固定的元素,该元素仅在您单击某些内容时才会显示(单击图像以将其放大,它会显示该大元素)。我的问题是,即使由于所有内容都居中而不会溢出,我是否也可以只为该结构强制滚动条? 我试图查看互联网上的其他内容,但没有任何效果。如果有人可以提出一个好的解决方案,我将非常感激:)预先感谢, HTML看起来像
<div id="img-modal">
<div class="img-info-holder">
<img class="img-modal-content" alt="vitalsImg">
<div id="reviewInfo">
<div style="width:50%; display: inline-block; float: left;"><p style="text-align: left; padding-left: 10px;color:#000;";>{$r.display_name}</p></div>
<div class="reviews-social" style="width:50%; display:inline-block;">
<div style="float: right; margin-right: 5px;max-width:32%"><a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text='{$r.review|ucfirst}', {$r.display_name}" data-share="twitter" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"> <img src="https://appsolve.io/img/apps/bundle/social-icons/twitter.png" alt="vitals-twitter-icon" class="vitals-reviews-social-icon" /> </div> </a>
<div style="float: right; margin-right: 5px;max-width:32%"><a href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook">
<img src="https://appsolve.io/img/apps/bundle/social-icons/facebook2.png" alt="vitals-fb-icon" class="vitals-reviews-social-icon" /></a> </div>
<div style="float: right; margin-right: 5px;max-width:32%"> <a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="https://appsolve.io/img/apps/bundle/social-icons/pinterest1.png" alt="vitals-pinterest-icon" class="vitals-reviews-social-icon" /></a> </div>
</div>
<p style="text-align: left; padding-left: 10px; font-size:14px;">{$r.date_published|date_format}</p>
<div class="vtls-star-rating" style="float:left;padding-left:10px;padding-right:100%;"><span class="vtls-empty-stars"><span class="vtls-full-stars" style="width: {$r.stars*$stars_height}px;"></span></span>
</div>
<div class="vitals-review-in-box" style="text-align: left; padding-left: 10px"><p style="font-family:Times;">{$r.review|ucfirst}</p> </div>
</div>
css是
#img-modal {
display: none;
position: fixed;
z-index: 10000000000;
padding-top: 20vh;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(211, 211, 211, 0.9);
}
.img-modal-content {
margin: auto;
display: inline-block;
max-width: 50%;
border-radius:10px;
-webkit-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
-moz-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
margin-right: 15px;
}
.v-close {
position: absolute;
top: 18vh;
right: 10px;
color: #fafafa;;
font-weight: bold;
cursor:pointer;
text-align: center;
font-size: 50px;
}
@media only screen and (max-width: 700px){
.img-modal-content {
max-width: 95%;
width: 95%
margin-right:0 !important;
}
.img-info-holder {
margin-left:0 !important;
}
#reviewInfo {
width: 95% !important;
margin-top: 2% !important;
margin-bottom:2% !important;
}
}
#reviewInfo {
margin: auto;
display: inline-block;
width: 40%;
max-width: 500px;
text-align: center;
color: #fff;
padding: 10px 0;
height: 200px;
vertical-align: top;
background-color:#FFF;
border-radius:10px;
-webkit-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
-moz-box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
box-shadow: 5px -9px 19px -2px rgba(176,176,176,1);
}
.img-info-holder {
text-align: center;
}
.vitals-review-in-box {
color:#000;
word-wrap:break-word;
}
#reviewInfo > p {
margin-bottom:0 !important;
color:#000;
font-family: Times;
}
.vitals-reviews-social-icon {
width: 35px;
height: 35px;
}