html - 嵌套的弹性项目等宽
问题描述
有没有办法让 Block1、Block2 和 Block3 与我下面的 HTML 结构具有相同的宽度?我一直在尝试使用flex: 1
导致 2 50% 列的结果。
.container {
display: flex;
align-items: flex-start;
}
.blocks {
display: flex;
flex: 1;
}
.blocks-left {
align-items: center;
border: 2px solid purple;
}
.blocks-right {
}
.block {
flex: 1;
}
#block-1 {
background: red;
height: 100px;
}
#block-2 {
background: blue;
height: 200px;
}
#block-3 {
background: green;
height: 400px;
}
<div class="container">
<div class="blocks blocks-left">
<div id="block-1" class="block">Block1</div>
<div id="block-2" class="block">Block2</div>
</div>
<div class="blocks blocks-right">
<div id="block-3" class="block">Block3</div>
</div>
</div>
解决方案
使block-right
to 具有33%
宽度和66%
左侧。为此,您可以简单地使用flex:2
,flex:1
这样左块的宽度将是右块的两倍
.container {
display: flex;
align-items: flex-start;
}
.blocks {
display: flex;
flex: 1;
}
.blocks-left {
align-items: center;
border: 2px solid purple;
flex:2;
}
.blocks-right {
flex:1;
}
.block {
flex: 1;
}
#block-1 {
background: red;
height: 100px;
}
#block-2 {
background: blue;
height: 200px;
}
#block-3 {
background: green;
height: 400px;
}
<div class="container">
<div class="blocks blocks-left">
<div id="block-1" class="block">Block1</div>
<div id="block-2" class="block">Block2</div>
</div>
<div class="blocks blocks-right">
<div id="block-3" class="block">Block3</div>
</div>
</div>
推荐阅读
- github-api - 为什么速率限制与授权和匿名访问 GitHub API 相似?
- python - 如何使用循环创建字典以在 python 中保存数据帧
- python - Buildroot 失败找不到 python 模块:“ImportError:找不到 Cython!”
- python - 使用 Python 从 Excel 单元格中检索格式化文本的索引
- python - 使用没有数值的 Pandas groupby
- post - 带有奇怪引用者的 POST 请求
- netlogo - 在同一个补丁中消灭两只海龟
- angular - SignalR HubConnection中的skipNegotiation是什么意思?
- python - 如何让用户输入列表?
- apache-kafka - Confluent Kafka REST 代理 Docker confluentinc/cp-kafka-rest:6.2.1 - 由于 LOG4J 错误而无法启动