首頁猿問如何使用其中的文本大小調整div寬度

如何使用其中的文本大小調整div寬度

JavaScript

撒科打諢 2022-08-18 15:54:16

我的想法是使s中具有類的每個元素的寬度等于其中文本的寬度。我該怎么做？div.main_content如您所見，每個（和）的寬度與 .紅色邊框說明了這一點。spanh2,ph6.main_contentdiv那么，如何使每個 div 的寬度適合這些 div 中的文本呢？（僅使用 CSS).main_content { width: 100%; height: 400px; font-weight: 800;}.main_content > * { border: 1px solid red; display: block; margin-bottom: 30px; text-align: center; }<div class="first_article"> <div class="first_content"> <div class="main_content"> <span class="growth">Growth</span> <h2>5 compelling user referral campaign examples</h2> <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps. </p> <h6>Author</h6> </div> </div></div>P：我一直在嘗試手動設置每個元素的大小。但是代碼太多了。有什么聰明的方法可以做到這一點嗎？widt

查看完整描述

5 回答

阿波羅的戰車

TA貢獻1862條經驗獲得超6個贊

你可以嘗試使用下面的css，看看它是否有效。

.main_content {

width: 100%;

height: 400px;

font-weight: 800;

}

.main_content>* {

border: 1px solid red;

display: table;

margin: 0 auto;

margin-bottom: 30px;

text-align: center;

}

<span class="growth">Growth</span>

<h2>5 compelling user referral campaign examples</h2>

<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

</p>

<h6>Author</h6>

</div>

反對回復 2022-08-18

慕妹3146593

TA貢獻1820條經驗獲得超9個贊

只有1個CSS函數：注意：它在IE中不起作用。試試看：width: fit-content

.main_content {

width: 100%;

height: 400px;

font-weight: 800;

}

.main_content > * {

border: 1px solid red;

display: block;

margin-bottom: 30px;

text-align: center;

width: -moz-fit-content;

width: fit-content;

}

<span class="growth">Growth</span>

<h2>5 compelling user referral campaign examples</h2>

<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

</p>

<h6>Author</h6>

</div>

反對回復 2022-08-18

紅顏莎娜

TA貢獻1842條經驗獲得超13個贊

在以下位置使用 flexbox：.main_content

.main_content {

width: 100%;

height: 400px;

font-weight: 800;

display: flex;

flex-direction: column;

align-items: center;

}

.main_content > * {

border: 1px solid red;

margin-bottom: 30px;

text-align: center;

}

<span class="growth">Growth</span>

<h2>5 compelling user referral campaign examples</h2>

<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

</p>

<h6>Author</h6>

</div>

反對回復 2022-08-18

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

添加到您的 .width: max-content.main_content > * {

.main_content {

width: 100%;

height: 400px;

font-weight: 800;

}

.main_content > * {

border: 1px solid red;

display: block;

margin-bottom: 30px;

text-align: center;

width: max-content;

}

<span class="growth">Growth</span>

<h2>5 compelling user referral campaign examples</h2>

<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

</p>

<h6>Author</h6>

</div>

反對回復 2022-08-18

鴻蒙傳說

TA貢獻1865條經驗獲得超7個贊

您只需使用：

width: max-content;

對于所有子元素，這將設置其中文本的每個（，，和）寬度的with。spanh2ph6

.main_content {

width: 100%;

height: 400px;

font-weight: 800;

}

.main_content>* {

border: 1px solid red;

display: block;

margin-bottom: 30px;

text-align: center;

width: max-content;

}

<span class="growth">Growth</span>

<h2>5 compelling user referral campaign examples</h2>

<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.

</p>

<h6>Author</h6>

</div>

反對回復 2022-08-18

5 回答
0 關注
211 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用其中的文本大小調整div寬度

如何使用其中的文本大小調整div寬度

5 回答

添加回答