Question

我试图制作一个可滚动的引导程序列表组，它可以调整大小，同时调整兄弟图像的大小。父容器没有固定的高度，我不能使用jQuery。有什么想法吗？

HTML：

<div class="row carousel-container">
    <div class="carousel-image-container">
      <img class="carousel-image img-responsive" src="https://lorempixel.com/900/500?r=4">
    </div>
    <div class="carousel-list-container">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small>Donec id elit non mi porta.</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small class="text-muted">Donec id elit non mi porta.</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small class="text-muted">Donec id elit non mi porta.</small>
        </a>
      </div>
    </div>

CSS：

.carousel {
  max-height: 500px;
  position: relative;
  display: inline-block;
  height: 100%;
}

.carousel-image-container {
  width: 60%;
}

.carousel-image {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.carousel-list-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: hidden;
  width: 40%;
}

Answer 1

有一个很酷的技巧，涉及CSS中的百分比填充，因为......

填充的大小（以百分比表示），相对于包含块的宽度。必须是非负的。

MDN spec

您可以利用此优势创建真正响应的网页布局。

这是工作[JSFiddle]（https://jsfiddle.net/oL0rgsqk/4/）

这是我使用的CSS：

.carousel-container {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 0;
}

.carousel-image-container {
  width: 60%;
  padding-top: 60%;
  position: relative;
  display: inline-block;
}

.carousel-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.carousel-list-container {
  width: 40%;
  padding-top: 60%;
  position: relative;
  display: inline-block;
  font-size: 14px;
}

.carousel-list-container-scroll {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

除了在.list-groups周围添加额外的.carousel-list-container-scroll div以启用此设置中的滚动

如何调整div高度以匹配兄弟img高度而没有固定的父高度

1 个答案: