Slick Slider配合lightbox使用浏览器最大化后内容超出屏幕问题求助

问题根源 #

你的布局溢出问题由以下两个可直接修复的错误导致：

1. 桌面端适配规则的类选择器书写错误
   在你的CSS中，大于768px宽度的媒体查询里，你给product-images设置了50%宽度，但漏掉了类选择器必须的.前缀，导致该规则完全不生效。桌面端下图片容器没有宽度限制，会按照图片原始尺寸撑开，直接超出外层容器范围。
2. 缩略图HTML存在冗余标签
   第2、4个缩略图节点后多出了多余的</a>闭合标签，虽然不直接影响布局，但会导致HTML结构校验失败，可能引发不可预期的渲染异常。

修复方案 #

步骤1：修正CSS媒体查询规则 #

将原代码中

@media only screen and (min-width: 768px) {
  product-images {
    width: 50%;
  }
}

替换为

* {
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .product-images {
    width: 50%;
  }
  .product-description {
    width: calc(50% - 36px);
  }
}

新增的全局box-sizing规则可以统一所有元素的宽高计算逻辑，避免边框、内边距撑宽元素的问题；给右侧商品描述也设置宽度可以避免内容过长挤压图片区域。

步骤2：清理HTML冗余标签 #

删除.slider-thumbnails节点下第2、4个缩略图后面多余的</a>标签即可。

修复后桌面端布局会按照左右各50%的比例正常排列，不会再出现溢出屏幕的问题。

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