在網頁中，你可能會遇到這樣的場景：有兩個div 容器，一個是固定寬度的，另一個是固定寬度的應佔用剩餘的可用空間。有效地配置此設定對於響應式佈局設計至關重要。
要實現這一點，您可以利用各種 CSS 技術。以下介紹兩種常用的方法：
方法一：設定寬度屬性
為固定寬度的div設定具體的寬度，使用calc()函數計算相應地另一個div 的寬度。確保 calc() 函數中的值考慮固定寬度 div 的寬度、任何邊距或填充以及剩餘空間的所需比例。
方法 2：利用 Display:table和 Display:table-cell
利用 display: table 和 display: table-cell 屬性建立類似表格的版面。設定固定寬度 div 的 width 屬性，並透過指定百分比值調整另一個 div 的寬度。百分比值將決定其應佔據的剩餘空間的比例。
範例程式碼：
請參閱下面的HTML 和CSS 程式碼範例，其中右側div （類別右側）的固定寬度為250px，左側div（類左側）佔據剩餘空間。
HTML:
<code class="html"><div class="left"></div> <div class="right"></div></code>
CSS:
<code class="css">.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}</code>利用這些技術，您可以有效地劃分兩個div 容器之間的空間，從而使您能夠創建靈活且響應靈敏的Web 佈局。
以上是如何在兩個固定寬度的div之間按比例劃分空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
