我希望左邊的元素比其他元素低一個，父元素的高度和寬度相等，并填充父元素的整個高度（將有 3 個或更多元素，這里有 3 個用于測驗目的）。這可能嗎（我使用的是最新版本的 Bootstrap 5）？
HTML 代碼：
<div class="row come-in">
<div class="col-md-1 sections">
<div>All</div>
<div>Best</div>
<div>Ever</div>
</div>....
CSS 代碼：
.sections {
text-orientation: upright;
writing-mode:vertical-lr;
align-items: stretch;
flex-flow: column;
}
.sections > div
{
width: max-content;
flex-grow: 1;
}
uj5u.com熱心網友回復：
這是你要找的嗎？
斯洛文尼亞波茲德拉夫。:)
.sections {
text-orientation: upright;
writing-mode: vertical-lr;
align-items: stretch;
flex-flow: column;
}
.sections > div {
width: max-content;
flex-grow: 1;
}
.row {
height: 500px;
border: 1px solid red;
}
.col-md-1 {
border: 1px solid blue;
}
.col-md-1 > div {
display: inline;
}
.col-md-1 > div > div {
border: 1px solid green;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="row come-in">
<div class="col-md-1 sections">
<div class="d-flex">
<div class="flex-grow-1">All</div>
<div class="flex-grow-1">Best</div>
<div class="flex-grow-1">Ever</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/530157.html
標籤：css推特引导弹性盒引导程序 5
上一篇：JavaScript物件速記