html - Bootstrap 4垂直对齐2个div - Flex
问题描述
我正在尝试在一个具有相同高度的主 div 中连接 2 个 div,第一个 div 有滑块(caroseul),第二个 div 有一些 img 和文本。当我调整窗口大小时,我想保持第二个 div 图像与第一个 div 高度(轮播图像高度)相同。
我的 Codepen 在这里: https ://codepen.io/anon/pen/drrewJ#anon-login
这是我的代码;
<div class="row">
<div class="col-md-8 col-xl-8 b">
<!-- b is border radius for see effect -->
<div class="container">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1250x650" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xl-4 b">
<div class="container">
<a href="#" >
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#" >
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#" >
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
</div>
</div>
</div>
解决方案
由于 flexbox 项目将与最高的高度相同,因此使用 flexbox 行执行此操作的唯一方法是将内容绝对定位在“更高”的 div 中......
最短列的弹性盒高度
<div class="col-md-4 col-xl-4 b overflow-auto">
<div class="position-absolute">
<a href="#">
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#">
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#">
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#">
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
<a href="#">
<div class="list-group">
<li class="media">
<img src="https://via.placeholder.com/100" class="img-fluid">
<div class="media-body">List-based media object</div>
</li>
</div>
</a>
</div>
</div>
推荐阅读
- .htaccess - 仅当 .webp 文件存在时,如何使用 .htaccess 显示 .webp 图像?
- ruby-on-rails - Ruby on Rails 行为在执行 bundle、rake 和 gem 等常用命令时我不明白
- javascript - 与此过滤器功能相比有什么问题吗,因为它根本没有返回任何东西
- javascript - 如何检测表单中的输入按键并滚动到元素?
- javascript - 如何检查 Map 或 Set 是否为空?
- c# - 列表是否必须排序 list.SequenceEqual() 函数才能正常工作?
- tfs - 具有代理配置的 TFS 代理处于脱机状态
- intellij-idea - IDEA+Maven中的JDK版本层次结构:JDK setter的重要性顺序是什么
- android - splashScreen 中的 ImageView 显示模糊
- scheduler - 触发 Control-M 文件夹,但它应该忽略文件夹中的几个作业