Question

我有这个清单

protocol Marker {
    func copy() -> Self
}

class Marker1 : Marker {
    func copy() -> Self {
        let result = type(of: self).init()
        return result
    }

    required init() {}
}

每个<ul> <li><img src="https://via.placeholder.com/650x100"></li> <li><img src="https://via.placeholder.com/150x350"></li> <li><img src="https://via.placeholder.com/100"></li> <li><img src="https://via.placeholder.com/350x350"></li> </ul>的宽度和高度不同。我需要按如下方式呈现：

li

所以，使用Flexbox我可以轻松满足1）demo 但是用css我无法满足宽度和高度。这里的首选解决方案是什么。没有javascript，这甚至可能吗？

更新：我已实施了建议here

Answer 1

我首选的解决方案是使用Javscript，我不会＆＃39;知道如何单独使用CSS。像这样的东西，你应该确保图像被加载;

＆＃13;

const forEach = Function.bind.call(Function.call, Array.prototype.forEach);
const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
const sizeProperties = ['height', 'width'];
const images = document.querySelectorAll('ul>li>img');
const size = reduce(images, (dimensions, image) => {
  const dimension = window.getComputedStyle(image);
  sizeProperties.forEach((property) => {
    dimensions[property] = Math.max(
      dimensions[property],
      Number.parseInt(dimension[property], 10),
    );
  });

  return dimensions;
}, {
  width: 0,
  height: 0,
});

forEach(images, (image) => {
  sizeProperties.forEach((property) => {
    image.parentNode.style[property] = `${size[property]}px`;
  });
})

＆＃13;

li {
  border-style: solid;
  border-width: 1px;
  list-style: none;
}

＆＃13;

<ul>
  <li><img src="https://via.placeholder.com/650x100"></li>
  <li><img src="https://via.placeholder.com/150x350"></li>
  <li><img src="https://via.placeholder.com/100"></li>
  <li><img src="https://via.placeholder.com/350x350"></li>
</ul>

＆＃13;

Answer 2

即使使用像<DataGridTemplateColumn Header="Heading"> <DataGridTemplateColumn.CellTemplate > <DataTemplate> <TextBlock Text="{Binding SomeData}" Foreground="{Binding SomeData, Converter={StaticResource TimestampToColorConverter}}" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>之类的预处理器，也无法检索未知高度并将其存储为CSS变量，因此单独使用SASS无法执行＃2。我意识到你希望纯粹使用样式表，但我要包含一个干净的例子，说明如何通过CSS和CSS的组合实现＃1和＃2。

我希望这有帮助！

jQuery

var tallest;
$('li').each(function() {
  tallest = tallest > $(this).height() ? tallest : $(this).height();
});

$('li').each(function() {
  $(this).height(tallest);
});

li {
  border: 1px solid gray;
  width: 100%;
  list-style-type: none;
}

根据列表中的最大高度/宽度调整所有项目的大小

2 个答案: