我试图制作一个可滚动的引导程序列表组,它可以调整大小,同时调整兄弟图像的大小。父容器没有固定的高度,我不能使用jQuery。有什么想法吗?
https://jsfiddle.net/lgants/oL0rgsqk/3/
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%;
}
答案 0 :(得分:2)
有一个很酷的技巧,涉及CSS中的百分比填充,因为......
填充的大小(以百分比表示),相对于包含块的宽度。必须是非负的。
您可以利用此优势创建真正响应的网页布局。
这是工作[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以启用此设置中的滚动