Question

使用引导程序，我有一行和两列。第一个包含图像，第二个包含文本。我正在尝试截取图片高度处的文本。如果没有JavaScript和固定高度，是否可以实现？

感谢您的帮助！

.row {
  margin: 1rem 0 0 1rem !important;
  max-width: 20rem;
}
div>div {
  border: 1px solid red;
}
.col-5 {
  padding: 0 !important;
}
.col-7 {
  overflow-y: hidden;
  /* How do I make this column as tall as the previous? */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-5">
    <img src="https://booklers.net/images/userImages/Doidel/bookImages/4/thumb.jpg" class="img-fluid" />
  </div>
  <div class="col-7">
    This is some test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text.
  </div>
</div>

Answer 1

您可以在文本列上使用内部div并使用position:absolute。然后在列和内部div上设置溢出自动。

<div class="container-fluid">
    <div class="row">
        <div class="col-5">
            <img src="https://booklers.net/images/userImages/Doidel/bookImages/4/thumb.jpg" class="img-fluid">
        </div>
        <div class="col-7 overflow-auto">
            <div class="scroll">
                This is some test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text....
            </div>
        </div>
    </div>
</div>

.scroll {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

演示：https://www.codeply.com/go/zN6zQkyR4M

引导柱调整为较短的柱

1 个答案: