CSS 左右比例1:2的實(shí)現(xiàn)方法

/* 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;
}

實(shí)現(xiàn)思路：

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

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

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

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

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