怎么样实现响应式的左右分栏？

实现响应式的左右分栏通常会结合使用Flexbox或CSS Grid布局，这两种现代布局模型都能更好地适应不同的屏幕尺寸。以下是使用Flexbox的一个例子：

1. **HTML结构**:
和之前的示例类似，创建两个`<div>`标签作为左右列：

   <div class="container flex-container">
     <div class="left-col">左侧内容</div>
     <div class="right-col">右侧内容</div>
   </div>

2. **CSS样式**:
使用Flexbox布局：

   .flex-container {
     display: flex;
     flex-wrap: wrap; /* 让内容自动换行 */
     justify-content: space-between; /* 各列间均匀分布 */
     align-items: flex-start; /* 内容垂直居顶 */
     padding: 10px; /* 留出一些边距 */
   }

   .left- 10px); /* 相同宽度，减去边距 */
     margin-bottom: 20px; /* 防止列之间太紧密 */
     box-sizing: border-box; /* 包含边框在内计算宽度 */
   }

3. **媒体查询**:
当屏幕宽度小于一定值时，可以调整左右列的宽度比例，使其变为一栏布局：

   @media (max-width: 600px) {
     .flex-container {
       flex-direction: column; /* 从水平转为垂直 */
     }
     
     .left-col, .right-col {
       width: 100%; /* 在小屏幕上占据全部高度 */
     }
   }

通过这种方式，左右内容会在大屏幕上有明显的分栏效果，在小屏幕时则自然地堆叠在一起。注意，不同浏览器对Flexbox的支持程度不同，可能需要加上一些兼容性前缀。