如何在固定寬度和靈活寬度的兩個元素之間劃分螢幕寬度？

在兩個元素之間劃分螢幕寬度

在網頁設計中，您可能會遇到需要在兩個div 之間劃分螢幕寬度的情況，使用一個具有固定寬度，另一個佔據剩餘空間。以下是實現此目的的方法：

使用具有基於百分比的寬度的 Float：

此方法使用 CSS float 屬性並排放置 div。

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

請注意，寬度加起來為 100%，以確保 div 填充父容器的整個寬度。

使用 Flexbox：

Flexbox 是一種更通用的佈局系統，可讓您使用靈活的尺寸來控制元素的大小和位置。

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

在此範例中，「.container」div 設定為顯示為Flexbox ，並且「.left」div 的彈性成長因子為1，這使其能夠擴展以填充固定寬度「.right ”div 之後的剩餘空間。

使用顯示表格:

您也可以使用 display: table 建立兩列佈局，其中第一列具有固定寬度，第二列佔用剩餘空間。

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

以上是如何在固定寬度和靈活寬度的兩個元素之間劃分螢幕寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！