CSS 左右比例1:2的實現方法

/* HTML代碼 */
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
/* CSS代碼 */
.container {
position: relative;
width: 100%;
height: 300px;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 33.33%;
height: 100%;
background-color: #333;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 66.67%;
height: 100%;
background-color: #666;
}

實現思路：

首先，使用一個包含兩個div的容器（container），設置其寬度與高度。

接著，分別為左側（left）和右側（right）的div設置寬度與高度。

對于左側的div，將其位置設置為absolute，即絕對定位。將其left和top值分別設置為0，表示相對于container左上角偏移0px。寬度設置為33.33%，表示占據container的1/3。

對于右側的div，將其位置設置為absolute，將其right和top值分別設置為0，表示相對于container右上角偏移0px。寬度設置為66.67%，表示占據container的2/3。

最后，分別為左右兩個div設置背景顏色即可。