jquery - 自动调整画廊旁边的位置信息框

标签 jquery html css

我在外部站点上托管了两个演示:

没有文本的页面显示了适当自动调整大小的预期行为。 我的第一个问题是:为什么信息 div 在第二张和第三张图片上没有收缩到 wrapper 的宽度?

主要问题:我如何将信息框放置在图像的右侧,以便包装器的大小适合图像和文本的组合并保持在视口(viewport)的中心?

我试过 float ,但它不适用于未调整大小的元素。

提前致谢。


我有以下设置:

// jQuery (gets cleaned up later):

$(document).ready(init);

function init() {
  $(".active").on("load", function(evt) {
    setActive($(this).parent(), $(this));
  });

  $(".images").on("click", "img", function() {
    showNextImage($(this).parent());
  });
}

function showNextImage(parent) {
  if(parent.find(".active").next("img").length != 0)
    setActive(parent, parent.find(".active").next("img"));
  else
    setActive(parent, parent.find("img:first"));
}

function setActive(parent, element) {
  parent.find(".active").removeClass("active").css("z-index", 0);
  element.addClass("active");
  element.css("z-index", 10);

  autoSizeParent(parent, element);
}

function autoSizeParent(parent, element) {
  parent.width(element.width());
  parent.height(element.height());
}
.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background: white;
}

.images {
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  max-height: 540px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="images">
    <img class="active" src="http://i.imgur.com/94WEXSB.gif" />            
    <img src="http://i.imgur.com/C0JSZMJ.gif" />           
    <img src="http://i.imgur.com/bfDOcv1.gif" />           
  </div>
  <div class="info">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam incidunt perferendis, porro natus obcaecati ut! Voluptate perferendis, dicta, perspiciatis blanditiis eligendi ab optio, culpa totam laboriosam veniam ipsam repellendus, ullam.</p>
  </div>
</div>

最佳答案

好的,现在我喜欢 display: flex

.wrapper {
    position: fixed;
    display: flex;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 1em;
    background: white;
}

.images {
    position: relative;
    overflow: hidden;
}

.info {
    width: 462px;
    margin-left: 30px;
}

img {
    position: absolute;
    max-height: 540px;
}

将信息放在图像下 flex-direction: 包装器上的列。 js设置的信息宽度。

关于jquery - 自动调整画廊旁边的位置信息框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26599489/

相关文章:

javascript - Jquery:如何创建 double .not() 语句?

jquery - 使用 jQuery .load() 或 .get() 返回 500 错误消息

javascript - 如果 textarea 没有成为焦点,会触发什么事件?

android - 钛合金createWebView加载html

javascript - jQuery 根据下拉列表中的选择将行移动到另一个表

javascript - 使用 Bootstrap 模态 : bad line 的问题

html - Flexbox:space-between 不会在元素之间产生空间

javascript - jquery addClass 和 removeClass 没有按预期工作

css - 如何从 WordPress 的某些摘录中删除特色图片

javascript - 单击评论后找不到文件,并且无法识别 savecomment.php 的路径