gpt4 book ai didi

javascript - 可点击的表单图像卡在 Div 下方

转载 作者:行者123 更新时间:2023-11-28 02:42:41 28 4
gpt4 key购买 nike

我有两个来回箭头,可以单击它们在我的单页网站上的框架中浏览照片。我的术语在这里可能不正确。保存照片和前后箭头的 div 出现在我的屏幕下方,而不是在屏幕场景 div 中。我可以将图像向上移动以出现在屏幕场景中,但不能移动箭头。即使我移动箭头,div 仍然固定在屏幕下方,如果这有意义的话。因此,当我减小屏幕宽度时,图像的宽度会缩放,但 div 的高度不会缩放。我想让整个图像 div 出现在屏幕场景中并适当缩放,并将箭头移动到照片的右上角,在相框之外。谁能告诉我如何解决这个问题?

var images = [
'squirrel.jpg',
'ewes.jpg',
];

function slideShowForward() {
images.push(images.shift());
document.getElementById('images').style.backgroundImage = 'url(' + images[0] + ')';
}

function slideShowBack() {
images.unshift(images.pop());
document.getElementById('images').style.backgroundImage = 'url(' + images[0] + ')';
}
/* Portfolio Page
--------------------------------------------- */

#portfolio-page {
width: 100%;
height: 100vh !important;
float: left;
}

#port-pic-1 {
width: 100%;
height: 100vh !important;
float: left;
background: url("just-grass.jpg") no-repeat;
background-size: cover;
position: relative;
z-index: -5;
}

#port-pic-2 {
width: 100%;
height: 100vh !important;
float: left;
background: url("port-pic-2.jpg") no-repeat;
background-size: cover;
display: none;
position: relative;
z-index: -5;
}

#grey-block {
background-color: grey;
width: 100%;
height: 67px;
}

#images {
background-image: url('giraffe.jpg');
border: 1px solid red;
background-size: contain;
background-repeat: no-repeat;
width: 23%;
min-width: 200px;
margin: 8% 0 0 10%;
}

<div id="portfolio-page">

<div id="port-pic-1">
<div id="grey-block"></div>
</div>

<div id="images" style="max-width:100%; height:auto;">
<div class="form">
<img src="left-arrow.png" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
<img src="right-arrow.png" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
</div </div>

</div>

</div>​

最佳答案

这是一个包含您当前代码的 jsfiddle:Original Fiddle

你目前在做什么

对于您当前的布局,您已尝试使用 #port-pic-1 { float: left; }从页面流中删除 block ,以便您的 #images block 将在页面上更高。

为什么这不起作用

block 元素 ( <div> ) 忽略 float 元素并按照您希望的方式定位自己,但内联元素 ( <img> ) 不会。它们漂浮在 float 元素周围。

可能的修复

您可以通过多种不同的方式放置箭头按钮。我要做的是删除 float 属性,并为按钮使用绝对位置。 Updated Fiddle

HTML

<div id="portfolio-page">
<div id="port-pic-1">
<div id="grey-block"></div>
<div id="images" style="max-width:100%; height:auto;">
<div class="form">
<img src="http://placehold.it/50x50" alt="left" onclick="slideShowBack();" style="width: 39px; height: 34px;" />
<img src="http://placehold.it/50x50" alt="right" onclick="slideShowForward();" style="width: 39px; height: 34px;" />
</div>
</div>
</div>
</div>

CSS

#port-pic-1 {
width: 100%;
height: 100vh !important;
background: url("http://placehold.it/400x400") no-repeat;
background-size: cover;
position: relative;
z-index: -5;
}

#images {
background-image: url('giraffe.jpg');
border: 1px solid red;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 8%;
left: 10%;
}

关于javascript - 可点击的表单图像卡在 Div 下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43037109/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com