做项目遇到的问题,这是用div模拟的表格,用 flex 实现,想做鼠标划过整行显示一个背景色。但是发现行元素的宽度不对,不能占满可滚动区域的宽度。 简易复现代码: Document * { box-sizing: border-box; } .container { width: 800px; margin: 100px auto; overflow: auto; } .row { display: flex; background-color: rgba(32, 288, 180, 0.1); width: max-content; } .action-column { flex: 0 0 300px; border: 1px solid #aaa; padding: 20px; } .column { flex: 1 0 auto; min-width: 200px; border: 1px solid #aaa; padding: 20px; } test test test asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf 背景色: "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/1f4dffd9c747529963846f1ab6a8e85e.png) 元素选择器选中: "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/952fd3f6a4a249a4653b0f19c917f10f.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/bd0211095d0648870a4f06b7c5352bc7.png) 如上图红圈中布局,怎么实现 1:如果三个都存在就如"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/3d881503b1c968060cf6813e7c4ea7af.png)这样显示。 2:如果“开卡建档”不存在就"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/0ee73281341c75f43323fa5d0d60daaa.png)这样显示。 3:如果“门诊充值”不存在就"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/37cf379ed5ba6f79265eba0c43008124.png)这样显示。 4:如果“缴费”不存就"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/2e71fb78b8b6f90f8470bfeb5cea53ad.png)这样显示。 5:如果“门诊充值”和“缴费”都不存在就"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/dbcaee2459c5d95758a51cf4ef32096f.png)这样显示。 方位不错就行,宽度不一定按画的。这样画是为了省劲儿。