英文:
how do container queries / contain property make my container disappear
问题
I'll provide the translation for the code part:
<!DOCTYPE html>
<html>
<body>
<figure class="image">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2/Citrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
</figure>
<p>
<span class="image">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2/60C7%2F4821%2/28B4%2/6E8F%2/776F%2/50ED%2/8963%2/9690%2/Citrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
</span>
<span class="image">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2/Shops%2Fes10619609%2/60C7%2/4821%2/28B4%2/6E8F%2/776F%2/50ED%2/8963%2/9690%2/Citrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
</span>
</p>
</body>
</html>
If you have further questions or need assistance with the explanation, please let me know.
英文:
Could you explain what makes my pictures disappear ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
span,
figure {
container-type: inline-size;
margin: auto;
max-width: 10%;
float: right;
}
.image img {
max-height: 500px;
height: max-content;
width: max-content;
max-width: 100%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<figure class="image">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
</figure>
<p>
<span class="image ">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
<span class="image ">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
</p>
</body>
</html>
<!-- end snippet -->
I wanted to use a container query to know the size of figure or img, and change the layout if they're too small (since they normally share the container width with other images too).
But any container-type property whose value is not "normal" just makes the elements disappear. huh ??
I don't understand how that works.
答案1
得分: 2
我相信你的问题是因为你同时使用了flexbox和float。从你的代码中删除float: right;，并使用适当的flexbox方法来将项目对齐到右侧。
我不知道你最终想要实现什么目标，所以很难建议如何更好地对齐这些图像。
英文:
I believe your problem is because you are using both flexbox and float. Remove float: right; from your code and use the proper flexbox way to align your items to the right.
I don't know what goal you are trying to achieve in the end, so it's hard to know what to suggest here for how to better align these images
答案2
得分: 1
float:right as it was has hidden the element. I have played around it and moved float:right to the img rather than its container, like this:
float:right 一直隐藏了元素。我尝试调整了它，并将 float:right 移到 img 上，而不是它的容器，像这样：
英文:
float:right as it was has hidden the element. I have played around it and moved float:right to the img rather than its container, like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
span,
figure {
container-type: inline-size;
margin: auto;
max-width: 10%;
}
figure {
margin-left: 80%;
}
.image img {
max-height: 500px;
height: max-content;
width: max-content;
max-width: 100%;
float: right;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<figure class="image">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" />
</figure>
<p>
<span class="image ">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
<span class="image ">
<img src="https://www.power-corpus.de/storage/images/image?remote=https%3A%2F%2Fwww.power-corpus.de%2FWebRoot%2FHostEurope2%2FShops%2Fes10619609%2F60C7%2F4821%2F28B4%2F6E8F%2F776F%2F50ED%2F8963%2F9690%2FCitrulline-SFD.jpg&shop=es10619609&width=600&height=2560" loading="lazy" /></span>
</p>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论