如何創建具有一個固定寬度 Div 和一個靈活寬度 Div 的佈局？

具有可變寬度分佈的Div

在Web 開發中，建立一個佈局通常很有用，其中兩個div 共享可用空間，但一個div 的寬度是固定的。

問題：

如何調整 div 的寬度，使一個保持固定寬度，而另一個佔據剩餘空間？

解決方案：

要實現此目的，請按照以下步驟操作：

1. HTML 結構：

<code class="html"><div class="right"></div>
<div class="left"></div></code>

2. CSS:

對於固定寬度右Div:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

對於靈活寬度左Div:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3。附加說明：

您也可以使用 display: table 取代 float，以獲得更好的跨瀏覽器相容性。
• 依照您的特定要求調整 .right 的 width 屬性.
• 此方法可確保固定寬度 div 保持不變，而彈性寬度 div 會調整以填滿剩餘空間。

以上是如何創建具有一個固定寬度 Div 和一個靈活寬度 Div 的佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！