css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？

CSS布局问题通常涉及到如何有效地控制网页元素在屏幕上的排列和尺寸调整。实现三列布局，你可以采用传统的浮动、Flexbox或者Grid布局。

1. **浮动法**（适用于IE9以上版本）：
- 使用`float:left`将三个元素分别设置为左浮动，然后设置父容器清除浮动(`overflow:hidden` 或 `clearfix`)，让其他内容正常显示。

   <div style="width:100%; overflow:hidden;">
     <div style="float:left; width:33.3%;">第一列</div>
     <div style="float:left; width:33.3%;">第二列</div>
     <div style="float:left; width:33.3%;">第三列</div>
   </div>

2. **Flexbox布局**（现代浏览器支持）：

   <style>
   .container {
     display: flex;
     justify-content: space-between;
   }
   .column {
     flex: 1;
   }
   </style>
   <div class="container">
     <div class="column">第一列</div>
     <div class="column">第二列</div>
     <div class="column">第三列</div>
   </div>

这样，中间列会自动填充剩余空间。

3. **Grid布局**（推荐用于复杂的布局，现代浏览器支持）：

   <style>
   .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
   .cell {
     /* ... */
   }
   </style>
   <div class="container">
     <div class="cell">第一列</div>
     <div class="cell">第二列</div>
     <div class="cell">第三列</div>
   </div>

使用`grid-template-columns`设置等分网格，中间列可以自适应剩余空间。

对于中间列自适应，你可以设定其宽度为百分比（如 `flex: 1` 或 `grid-column: span 1 / auto`），使其随着容器大小变化而动态调整。