可以使用 CSS 中的 flex 布局或者 grid 布局来实现自适应的两列布局。
其中,使用 flex 布局需要将容器设置为 display: flex,并且通过设置 flex-wrap、flex-direction 和 justify-content 等属性来控制子元素在容器中的排列方式和位置。在一个 flex 容器中,可以将子元素分为多个轴线,通过设置 align-items 和 align-content 属性控制轴线上子元素的对齐方式。
另外,也可以使用 grid 布局,在父元素上设置 display: grid,通过 grid-template-columns 和 grid-template-rows 属性设置网格的列数和行数,再通过 grid-column 和 grid-row 等属性将子元素放置在相应的单元格内。
在以上两种方法中,均需合理运用媒体查询来保证布局在不同设备上的自适应性,并采用百分比或 rem 单位等相对单位进行尺寸的设定。
需要注意的是,为了使布局更加稳定,建议对子元素进行宽度或高度的限制,并在需要进行响应式设计时选择合适的断点进行调整。