容器div内子组件如何保留左侧父级限制同时填充页面剩余宽度

安全阿岳

2026-9-27

卡片布局实现方案

核心思路

利用视口宽度单位vw配合calc()动态计算卡片容器的宽度，实现左边界对齐父容器、右边界延伸到视口最右侧的效果，同时自动适配大小屏场景。

调整后的样式代码

你只需要修改.cards的样式，补充对应属性即可：

.container{
    max-width:1020px;
    position:relative;
    margin:0 auto;
    /* 注意：因为子元素是绝对定位，需要给父容器设置对应高度避免高度塌陷，根据实际需求调整数值 */
    height: 300px;
}

.cards{
   position:absolute;
   left: 0;
   top: 0;
   /* 核心逻辑：50vw是视口一半宽度，510px是父容器最大宽度的一半，两者相加刚好让容器从父容器左边缘延伸到视口右边缘 */
   width: calc(50vw + 510px);
   /* 避免卡片换行 */
   white-space: nowrap;
   /* 卡片超出时仅容器内横向滚动，不影响页面整体 */
   overflow-x: auto;
   /* 可选：隐藏滚动条，不需要可以删除 */
   scrollbar-width: none;
}
/* 适配webkit内核浏览器隐藏滚动条 */
.cards::-webkit-scrollbar {
    display: none;
}

.card{
   width: 268px;
   display:inline-block;
   /* 可选：设置卡片间距，根据实际需求调整 */
   margin-right: 16px;
   vertical-align: top;
}