Question

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

＆＃13;

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] + ')';
}

＆＃13;

/* 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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

以下是您当前代码的问题：Original Fiddle

您目前正在做什么

对于您当前的布局，您已尝试使用#port-pic-1 { float: left; }从页面流中删除该块，以便您的#images块位于页面的较高位置。

为什么这不起作用

块元素（<div>）忽略浮动元素并按照您希望的方式定位自己，但内联元素（<img>）不会。它们漂浮在浮动元素周围。

可能的修复

您可以通过多种不同方式定位箭头按钮。我要做的是删除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%;
}

可点击的表格图片被困在Div

1 个答案: