CSS常見布局中,左邊定寬是一種常用的布局方式。
具體實(shí)現(xiàn)方法是先設(shè)置一個(gè)寬度固定的左側(cè)容器,再用float屬性將其浮動(dòng)到左側(cè),接著將右側(cè)容器的margin-left屬性設(shè)置為左側(cè)容器的寬度即可。
.left { width: 200px; float: left; } .right { margin-left: 200px; }
通過這種方式,可以實(shí)現(xiàn)左邊固定寬度,右邊自適應(yīng)寬度的布局效果。
此外,還可以用position屬性實(shí)現(xiàn)左側(cè)定位效果,具體實(shí)現(xiàn)方法是將左側(cè)容器的position屬性設(shè)置為fixed或absolute,再將其left屬性設(shè)置為0即可。
.left { width: 200px; position: fixed; /* 或者 absolute */ left: 0; } .right { margin-left: 200px; }
需要注意的是,使用position屬性布局時(shí)需要注意不會(huì)影響其他元素的正常布局。
總之,CSS的左邊定寬布局方式應(yīng)用廣泛,掌握它可以更好地完成頁(yè)面的布局。