Question

在@DavidThomas后面，我提出了一个与此问题相关的单独问题，而不是编辑该问题以避免混淆。这个问题来自那个。 Do CSS rules exist for placing content within elements and positioning them?

我想用图像表示CSS类，以便如果div具有classA，classB，classC等类，则将名为classA.jpg，classB.jpg，classC.jpg等的图像放在{ {1}}，但应将它们放置在div中，以免彼此重叠或覆盖。

所有图像都将小于div，或将其调整为div大小的一小部分。

简而言之，我要问的问题是，如何让一个类将图形放置在div宽度的一小部分，然后将其调整为div大小的一定百分比。

关于更多背景信息，我问了有关reddit How can I express multiple CSS classes in the same div?的问题，但我想我在这里更简洁地表达了这一观点。

Answer 1

我不太确定我是否理解您的问题。此外，我没有带有这些名称的图像，因此我不得不使用内部带有图像的文章。这个想法是让您的div使用height:auto成为flexbox。图像都是正方形，但大小不同。

let myDiv = document.querySelector("div");
let classNameRy = myDiv.className.split(" ");

for(let i = 0; i < classNameRy.length; i++){
  let thisImg = document.querySelector(`article.${classNameRy[i]} img`);
  let daSrc = thisImg.getAttribute("src");
  let newImg = document.createElement("img");
  newImg.setAttribute("src", daSrc);
  newImg.setAttribute("alt", "whatever");
  myDiv.appendChild(newImg)
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 170px;
  height: auto;
  border: 1px solid;
  padding: 4px 0 0;
}

div img {
  margin: 0 2px 4px 0;
  width: 50px;
  height: 50px;
}

article {
  display: none;
}

<div class="a b c d e f"></div>


<article class="a"><img src="https://via.placeholder.com/50x50"></article>
<article class="b"><img src="https://via.placeholder.com/150x150"></article>
<article class="c"><img src="https://via.placeholder.com/250x250"></article>
<article class="d"><img src="https://via.placeholder.com/50x50"></article>
<article class="e"><img src="https://via.placeholder.com/75x75"></article>
<article class="f"><img src="https://via.placeholder.com/50x50"></article>
<article class="g"><img src="https://via.placeholder.com/50x50"></article>
<article class="h"><img src="https://via.placeholder.com/50x50"></article>
<article class="i"><img src="https://via.placeholder.com/50x50"></article>
<article class="j"><img src="https://via.placeholder.com/50x50"></article>
<article class="k"><img src="https://via.placeholder.com/50x50"></article>
<article class="l"><img src="https://via.placeholder.com/50x50"></article>

如何用多个图像表示多个CSS类？

1 个答案: