【发布时间】：2018-02-27 23:26:38
【问题描述】：
我已经制作了一个图片库，并且从现在开始我就一直困扰着这个问题，因为我想将下一个和上一个按钮定位在图像的底部，但是我怎样才能使按钮相对于图像为图像是不同的和变化的。如何将控制器按钮放在图像底部。
我想做的事：
- 它具有全屏背景模式。 （完成）
- 在该模式上，它会显示图像。 （完成）
- 在图像的底部，我想保持一个恒定的显示控制器按钮，这些按钮是下一个和上一个按钮，可以通过图像进行更改。 （两天后卡住了）
尝试到现在：
尝试制作相对于 div 类“模态内容和图像”的按钮，但根据宽度大小，我的按钮会移动。
尝试更改 div 的高度和宽度，并尝试了其他一些方法。
最后什么都没用。我试图通过媒体查询将按钮从 1900 像素一直定位到 400 像素，以不正确的方式实现布局。但它仍然看起来并不好和准确。 （只能使用媒体查询。）
我知道这不是正确的方法。我在这里想念什么？如何让元素在这种情况下做出响应？
如果我应该尝试任何不同的方法，或者如果我的 CSS 代码出现一些错误，请以您的专业知识告诉我。
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}.photos-thumbnail {
width: 440px;
}
.photos-thumbnail img {
margin: 10px 2px 0 0;
width: 140px;
height: 100px;
cursor: pointer;
}
.view-all-photos:hover {
opacity: 0.7;
}
.column {
float: left;
width: 16.6%;
}
.pro-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
position: relative;
margin: 50px auto 0;
width: 100%;
height: 90%;
background-color: rgba(0, 0, 0, 0.1);
}
.myslides img {
object-fit: contain;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
}
.mySlides {
display: none;
}
.column img {
width: 100%;
}
.controller {
position: absolute;
background: linear-gradient(transparent, #1A1A1A);
text-align: center;
height: 12%;
width: 100%;
padding-top: 20px;
margin-top: -110px;
}
.prev,
.next {
position: absolute;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
border: 1px solid #02BFC1;
border-radius: 50%;
width: 33px;
padding: 15px;
font-size: 25pt;
transition: 0.6s ease;
user-select: none;
-webkit-user-select: none;
}
.next {
margin-left: 50px;
}
.prev {
margin-left: -50px;
}<div class="photos-thumbnail">
<img class="hover-shadow" onclick="openModal(); currentSlide(1)" src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(2)" src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(3)" src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
</div>
<div id="myModal" class="pro-modal">
<div class="modal-content">
<div onkeydown="ff(e)" class="mySlides">
<img src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
</div>
<div class="controller">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="sep">|</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>即使在调整大小时我也想要输出
这发生在浏览器窗口调整大小之后。图像将开始适合窗口并根据需要缩小，但按钮将静态位于底部。
【问题讨论】：
标签： html css responsive-design media-queries image-gallery