css实现横向布局 |css3焦点动画

// HTML代码
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
// CSS代码
.container {
display: flex;  // 设置为flex布局
}
.left {
flex-grow: 1;  // 设置左边元素占据剩余空间的1/3
background-color: yellow;
}
.right {
flex-grow: 2;  // 设置右边元素占据剩余空间的2/3
background-color: green;
}

以上代码实现了一个简单的横向布局，其中使用了flex布局。在容器元素上设置了display属性为flex，这样就可以启用flex布局。左边和右边元素分别占据了剩余空间的1/3和2/3，通过设置flex-grow属性实现。此外，还可以使用flex-shrink控制元素在空间不足时的缩放比例，使用flex-basis控制元素的起始大小。