如何在兩個固定寬度的div之間按比例劃分空間？

兩個Div，按比例劃分空間

在網頁中，你可能會遇到這樣的場景：有兩個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中文網其他相關文章！