html - 如何使用 css flex 框创建滑块布局?
问题描述
我正在尝试使用弹性框创建滑块布局,例如这张照片:
在这里,我在右侧有大照片,在左侧有缩略图项目。我想将左侧和缩略图包装与大照片高度对齐。但不幸的是,仅使用弹性框是不可能的,我应该使用 JavaScript 检查大照片的高度并将左侧对齐。
例如检查此代码:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
align-items: flex-start;
justify-content: center;
}
.right{
width: calc(100% - 150px);
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
在示例代码中,我没有图像,我在 CSS 中使用 450px 高度处理了这个问题。
那么如何将左侧与 JS 对齐并且仅与 CSS 对齐?我想使用space-between
模式来显示这个高度的所有项目。考虑一下,height:100%
对这个问题不起作用。
解决方案
此解决方案使用CSS Grid layouts
-display: grid
在您的上使用,它使用(删除和元素中的定义。)wrapper
布置您的left
和right
部分。grid-template-columns: 150px 1fr
width
right
left
现在添加height: 100%
到left
,然后为flex: 1
flexbox项目的项目占据来自该right
部分的动态高度 - 请参见下面的演示:
main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 500px;
overflow: hidden;
background: gray;
display: grid; /* make this a grid container */
grid-template-columns: 150px 1fr; /* 150px for left and rest for right*/
align-items: flex-start;
justify-content: center;
}
.right {
/* width: calc(100% - 150px);*/
height: 450px;
background: red;
}
.left {
/*width: 150px;*/
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%; /* ADDED */
}
.item {
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
flex: 1; /* ADDED */
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
推荐阅读
- python - 使用 Prim 算法的最小生成树中的错误
- java - (java) 我的素数生成器最多只能工作 200
- python - 如何找到一个数字的质因数?花了几个小时试图弄清楚为什么 if 和 else 会同时执行
- javascript - 如何使用库 SortableJS 提交新排序的元素列表
- r - 如何缩小和放大堆叠条形图中特定变量的视觉比例?
- inno-setup - 如何在 Inno Setup 的 CreateInputOptionPage 上移动和编程单个控件?
- ios - FFmpeg - 检查所有视频文件是否已正确连接到一个视频中
- java - 如何与包含多个 xml 的输入 xml 文件分开创建多个 xml 文件
- hybris - HYBRIS 灵活查询从订单模型中获取所有产品
- c# - 通过 IList
往返视图获取:ArgumentException:已添加具有相同键的项目。键:允许