我想讓元素相互重疊，這樣父級就可以采用包含它們所需的最小高度和寬度。受到這個問題的啟發，我提出了以下解決方案。看到這個相同的 JSFiddle。
#merger {
text-align: center;
background-color: #f2e7e5;
overflow: hidden;
display: inline-block;
}
#merger > * {
float: left;
width: 100%;
}
#merger .active {
visibility: visible;
}
#merger > *:not(:first-child) {
margin-left: -100%;
}<div id="merger">
<div>
1
</div>
<div>
222
</div>
<div>
3
<br />
3
</div>
<div>
444
<br />
444
</div>
</div>但是，上述解決方案僅適用于高度。您可以看到父級merger實際上占用了額外的寬度。
如果您進入 JSFiddle 并洗掉寬度小于其余元素的元素之一（例如“1”），則父元素的寬度會縮小。預期的行為是父母的寬度保持不變，因為它應該等于它最寬的孩子的寬度。移除非最寬的孩子應該對寬度沒有影響，就像移除非最高的孩子目前對高度沒有影響一樣。
如何將我已經擁有的高度行為擴展到寬度？
uj5u.com熱心網友回復：
我建議使用 CSS Grid，如下所示：
#merger {
/* displaying the element as an inline grid; so that the
element itself behaves as an inline element, while still
laying its own content out as a grid; so instead of
taking the full block-width of its parent it takes only
the space it needs: */
display: inline-grid;
/* defining one named area into which all content will be
placed: */
grid-template-areas: "allContent";
background-color: #f2e7e5;
overflow: hidden;
}
#merger>div {
/* placing all the <div> children of the #merger element
into the single named grid area: */
grid-area: allContent;
}<div id="merger">
<div>
1
</div>
<div>
222
</div>
<div>
3
<br /> 3
</div>
<div>
444
<br /> 444
</div>
</div>參考：
display.grid-area.grid-template-areas.place-content.
參考書目：
- “網格完整指南”，CSS 技巧。
- “網格布局的基本概念”，MDN。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/496994.html
上一篇：Jquery/JqueryUI-將影像保留在父div上
下一篇：另一個彈性盒中的彈性盒