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

Question

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

没有文本的页面显示了适当自动调整大小的预期行为。 我的第一个问题是:为什么信息 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>

Answer 1

好的，现在我喜欢 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设置的信息宽度。