CSS中的布局是網頁設計中很重要的一部分，它決定了頁面元素的位置和大小。在布局中，居左和居右是兩種常見的位置方式。

居左和居右都可以通過CSS中的text-align屬性實現。

/* 居左 */
.left {
text-align: left;
}
/* 居右 */
.right {
text-align: right;
}

以上代碼將左對齊和右對齊分別應用于類名為“left”和“right”的HTML元素。

除了text-align屬性，CSS還提供了其他方法來實現居左和居右的布局。

比如，可以通過CSS中的float屬性來實現元素的左浮動和右浮動。

/* 左浮動 */
.left {
float: left;
}
/* 右浮動 */
.right {
float: right;
}

注意，浮動元素需要注意寬度的設置，否則可能導致元素溢出或遮擋。

另外，使用flex布局也能實現居左和居右布局。

/* 居左 */
.container {
display: flex;
justify-content: flex-start;
}
/* 居右 */
.container {
display: flex;
justify-content: flex-end;
}

以上代碼將元素容器的內容居左或居右對齊，需要注意的是，flex布局需要設置容器的display屬性為flex。

綜上所述，居左和居右的布局在CSS中是很容易實現的，每種方式都有不同的應用場景，根據實際需要選擇合適的方法實現。