Question

我在外部网站上托管了两个演示：

没有文字的页面显示正确自动调整的预期行为。我的第一个问题是：为什么信息div不会缩小到第二张和第三张图片的包装宽度？

主要问题：如何将信息框放在图像的右侧，以便包装器适当地与图像和文本结合使用并保持在视口的中心？

我试过浮动，但这对于未经过大小处理的元素没有用。

提前致谢。

我有以下设置：

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

设置

自动调整库旁边的位置信息框

1 个答案: