CSS包裹內(nèi)容是一個(gè)很有用的技巧，它可以使得某一元素的大小隨內(nèi)容自適應(yīng)，同時(shí)又保留了元素原有的布局上下文。比如我們想要實(shí)現(xiàn)一個(gè)卡片的效果，但是每一個(gè)卡片的內(nèi)容長(zhǎng)度都不同，如何才能讓它們都看起來(lái)一樣大呢？

這時(shí)候就可以使用CSS包裹內(nèi)容的技巧了。我們首先需要給卡片一個(gè)固定的寬度，比如300px，然后使用display: inline-block;使得它們?cè)谝恍信帕小＝又诳ㄆ膬?nèi)容元素上應(yīng)用display: inline-block;和width: 100%;，這樣就可以讓內(nèi)容元素根據(jù)卡片的寬度自適應(yīng)，并保留原有的布局上下文。具體代碼如下：

.card {
width: 300px;
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
.card-content {
display: inline-block;
width: 100%;
}

這樣就可以讓每一個(gè)卡片的內(nèi)容高度隨內(nèi)容自適應(yīng)，并且它們看起來(lái)大小一樣。這個(gè)技巧不僅適用于卡片，還可以用于其他需要自適應(yīng)高度的元素。