我有一個奇怪的用例，我需要第一個 div（鏈接）浮動在父級（orw）的整個高度上。這個高度會動態變化。其他兄弟姐妹（訂單）占據其余的水平空間。問題是它們不會跳到下一行，我每行只需要一個訂單 div。
<div class="orw">
<span class="link">ss</span>
<div class="orders">sdddds<div class="status">sss</div></div>
<div class="orders">sdddds<div class="status">sss</div></div>
</div>
CSS
.orw {display: flex; width: 100%; height: 200px; }
.link {display: flex; position: relative; float: left; background: #ccc; width: 100px; height: 100%; position: relative;align-items: center; justify-content: center;}
.orders {display: flex; position: relative; float: left; width: 100%; background: #f92; height: 100%; align-items: center; justify-content: center;}
.status {background: #ccc; display: flex; position: relative; width: 100px; float: right; height: 100%; align-items: center; justify-content: center;}
關于如何解決它的任何想法？
https://jsfiddle.net/fsL2cbq3/3/
uj5u.com熱心網友回復：
也許你正在尋找這樣的東西：鏈接區域和訂單區域之間的分割的舊樣式定位布局的混合，以及每個內部的 flexbox。
.orw { position:relative; padding-left:100px;}
.orw * { display: flex; align-items: center; justify-content: center;}
.link { position:absolute; top:0; left:0; bottom:0; width:100px;}
.orders { background: #f92; display:flex; gap:10px;}
.status { background: #ccc; display:flex;}<div class="orw">
<span class="link">ss</span>
<div class="orders">sdddds<div class="status">sss</div></div>
<div class="orders">sdddds<div class="status">sss</div></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401218.html
上一篇：如何使音頻元素在串列項中對齊？
下一篇：輸入元素不在一行/一行中