搜索结果数量影响页面宽度问题排查求助

核心原因 #

页面主内容区域（.main）未设置固定宽度或最小宽度限制，当搜索结果数量减少时，容器会自适应收缩以匹配内容宽度，最终导致整个页面宽度跟随变化。此外：

• Tile视图下，.tile-container作为flex容器，在内容不足一行时不会强制占据父元素的全部宽度
• 表格视图中，表格默认会根据内容自动收缩宽度，进一步加剧页面宽度波动

解决方案 #

1. 锁定主内容容器宽度 #

修改布局样式，给.main添加最小宽度和满宽设置，确保它不会随内容收缩：

.main {
    width: 100%;
    min-width: 1000px; /* 根据你的设计需求调整，比如和无搜索时的页面宽度一致 */
}

2. 强制Tile容器占满父元素 #

调整.tile-container的样式，让它始终占据父元素的全部可用宽度：

.tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    justify-content: flex-start; /* 保持Tile左对齐，可选 */
}

3. 固定表格宽度（针对表格视图） #

如果表格视图也存在宽度收缩问题，给表格添加最小宽度和固定布局：

#artworkTable {
    width: 100%;
    min-width: 900px; /* 根据表格列数调整，确保列宽稳定 */
    table-layout: fixed; /* 可选，强制列宽度均匀分配，避免内容影响列宽 */
}

4. 确保整体容器稳定 #

检查.container的样式，给它设置最小宽度，避免整个页面收缩：

.container {
    display: flex;
    width: 100%;
    min-width: 1200px; /* 包含侧边栏+主内容的整体最小宽度 */
}

效果验证 #

修改后，无论搜索结果数量多少，页面的容器宽度都会保持固定，侧边栏、搜索栏等元素的位置和宽度也不会发生偏移。

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