如何用-webkit-box实现flex-wrap的等效效果？兼容旧版Qt

首先，你代码里的webkit-box-lines漏了前缀，正确写法是-webkit-box-lines: multiple;，但即使修正前缀，很多旧版本的Qt WebKit（比如Qt 4.x及更早的内置webkit）根本没有实现这个属性，所以得用替代方案：

方案1：浮动布局模拟换行 #

这是兼容性最好的方案，旧浏览器/webkit环境几乎都支持：

/* 容器样式 */
.container {
  overflow: hidden; /* 清除浮动 */
  max-width: 100%; /* 限制容器宽度触发换行 */
}

/* 子元素样式 */
.container > .item {
  float: left;
  width: 200px; /* 设置子元素宽度，控制每行数量 */
  margin: 0 10px 10px 0;
  /* 自定义其他样式：高度、内边距等 */
}

如果需要最后一行左对齐，该方案直接生效；若需两端对齐，可配合text-align: justify和伪元素补充，但浮动布局的适配性更稳定。

方案2：内联块布局 #

通过inline-block让子元素自动换行，需处理元素间的默认空格：

.container {
  font-size: 0; /* 消除内联块之间的空格 */
  max-width: 100%;
}

.container > .item {
  display: inline-block;
  font-size: 14px; /* 重置字体大小 */
  width: 200px;
  margin: 0 10px 10px 0;
  vertical-align: top; /* 避免子元素高度不同时错位 */
}

该方案可通过text-align: center/justify轻松调整对齐方式，大部分Qt环境的webkit都支持inline-block。

方案3：JS动态计算换行 #

如果CSS方案无法满足需求，可通过JS动态计算容器与子元素宽度，强制超出的子元素换行：

function handleWrap() {
  const container = document.querySelector('.container');
  const items = container.querySelectorAll('.item');
  const containerWidth = container.offsetWidth;
  let currentRowWidth = 0;

  items.forEach(item => {
    const itemWidth = item.offsetWidth + parseInt(getComputedStyle(item).marginRight);
    if (currentRowWidth + itemWidth > containerWidth) {
      item.style.clear = 'left';
      currentRowWidth = itemWidth;
    } else {
      currentRowWidth += itemWidth;
      item.style.clear = 'none';
    }
  });
}

// 初始化及窗口尺寸变化时触发
handleWrap();
window.addEventListener('resize', handleWrap);

注意事项 #

• 优先选择CSS方案（浮动/内联块），JS方案作为兜底，因为旧Qt环境的JS引擎可能存在兼容性问题。
• 测试时需针对目标Qt版本的webkit内核验证，不同Qt版本的webkit支持差异较大。

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