如何让包含leftdiv和rightdiv的div实现响应式布局及内容适配

1、左右div响应式换行适配 #

给外层父div开启flex换行，同时给左右子div设置最小宽度，触发自动换行逻辑，示例代码如下：

/* 外层父div容器，假设类名为container */
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 调整左右div之间的间距可修改该值 */
  gap: 20px;
}
.leftDiv {
  /* 可根据实际内容宽度调整最小宽度阈值 */
  min-width: 650px;
  flex: 1;
}
.rightDiv {
  min-width: 300px;
  flex: 1;
}

当屏幕宽度小于两个子div最小宽度加间距的总和时，rightDiv会自动移动到leftDiv下方展示。

2、左侧内容防拥挤优化 #

对原有.tokenDetails样式做调整，去掉固定宽度限制，增加自动换行和间距控制，优化后代码如下：

.tokenDetails{
    width: 100%;
    height: auto;
    display: flex;
    /* 空间不足时内部项自动换行 */
    flex-wrap: wrap;
    /* 横向间距替代原有固定margin-left，更灵活 */
    column-gap: 47px;
    /* 换行后纵向间距，避免上下内容贴在一起 */
    row-gap: 12px;
    padding: 15px 20px;
    justify-content: flex-start;
    .tPrice{
        min-width: 180px;
        width: fit-content;
    }
    .tTotalRaise{
        min-width: 150px;
        width: fit-content;
    }
    .ticketAllocation{
        min-width: 150px;
        width: fit-content;
    }
    .tMarketCap{
        min-width: 180px;
        width: fit-content;
    }
}
/* 小于768px小屏场景下进一步缩小间距适配 */
@media (max-width: 768px) {
    .tokenDetails {
        column-gap: 24px;
        padding: 12px 16px;
    }
}

优化说明：

• 用min-width+fit-content替换原有固定宽度，既保证每个信息项的基础展示空间，又能根据内容长度自适应宽度
• 新增的row-gap保证换行后上下行内容有足够间距，不会拥挤
• 左右侧增加内边距，避免小屏下内容贴到屏幕边缘

内容的提问来源于stack exchange，提问作者Leo