元素的比例定位

我正在製作我的第一個電子應用程序。我有最初的layout。當用戶改變我想是窗口：元素的比例定位

紅色部分應該改變寬度和高度
藍色部分應該只改變高度，但不寬
綠色部分應該只改變寬度，但高度不

在.NET的WinForms這將是一個重要的任務：

設置紅色錨左，上，右，下
設置藍錨上，右，下
和綠色錨到左，右，下

我怎樣才能實現與HTML + CSS同樣的效果？

我想我可以使用表格元素，但我讀過表格不鼓勵在頁面佈局中使用。

2017-03-05 Cole Pfeiffer

你可能想看看Flexbox的佈局:) https://developer.mozilla.org/en-US/docs/ Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes – MimiEAM

@MimiEAM，我會研究它。似乎很有趣。剛剛找到了聖盃演示，幾乎正是我需要的。 –

這可能會爲你工作：

.main { 
 
    min-height: 100vh; 
 
    display: flex; 
 
} 
 
.blue { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 
.sub { 
 
    margin-right:5px; 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.red { 
 
    flex: 1; 
 
    background: red; 
 
    margin-bottom:5px; 
 
} 
 
.green { 
 
    background: green; 
 
    flex: 0 0 10%; 
 
    }

<div class="main"> 
 
\t <div class="sub"> 
 
\t \t <div class="red"></div> 
 
\t \t <div class="green"></div> 
 
\t </div> 
 
    <div class="blue"></div> 
 
</div>

來源

2017-03-05 12:40:30

不幸的是，這並沒有擴大到底部，即沒有底部錨。當窗口上下拖動時，紅色和藍色部分必須與窗口一起拉伸，而綠色部分必須始終位於底部。 –

是的，這次工作正常。 –

嗯，不是很好:)我希望綠色和藍色的部分保持其一側永遠不變。因此，我必須在綠色選擇器中的'flex：0 0 10％'中將百分比替換爲像素，對藍色部分替換百分比。 –

元素的比例定位

回答

相關問題