css中如何放左中右三个盒子

在CSS中，你可以使用Flex布局或者Grid布局来方便地放置左、中、右三个盒子。以下是两种常见的方法：

**1. 使用Flex布局**：

.container {
  display: flex; /* 将元素设为flex容器 */
}

.left-box {
  flex: 0 0 auto; /* 左侧盒，固定宽度 */
  width: 25%; /* 或者设置具体的像素值 */
}

.middle-box {
  flex: 1; /* 中间盒，自适应剩余空间 */
}

.right-box {
  flex: 0 0 auto;
  width: 25%;
}

将这三个类分别应用到对应的HTML元素上。

**2. 使用Grid布局**：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列等宽的网格 */
}

.left-box {
  grid-column: 1; /* 定位到第一列 */
}

.middle-box {
  grid-column: span 2; /* 跨越两列 */
}

.right-box {
  grid-column: 3; /* 定位到第三列 */
}

在每个例子中，`.container`是包含这三盒子的容器，通过调整属性可以轻松控制它们的位置和大小。记得给HTML元素添加相应的类名。