第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Flex容器中的文本不會(huì)在IE11中包裝

Flex容器中的文本不會(huì)在IE11中包裝

Flex容器中的文本不會(huì)在IE11中包裝考慮以下片段:.parent {  display: flex;  flex-direction: column;  width: 400px;  border: 1px solid red;  align-items: center;}.child {  border: 1px solid blue;}<div class="parent">  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div>  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div></div>有已知的解決辦法嗎?
查看完整描述

3 回答

?
侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

將此添加到代碼中:

.child { width: 100%; }

我們知道,塊級(jí)子應(yīng)該占據(jù)父級(jí)的全部寬度。

Chrome明白這一點(diǎn)。

無論出于什么原因,IE11都想要一個(gè)明確的請(qǐng)求。

使用flex-basis: 100%flex: 1也很管用。

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;}.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div></div>

注意:有時(shí)需要對(duì)HTML結(jié)構(gòu)的各個(gè)級(jí)別進(jìn)行排序,以確定哪個(gè)容器獲得width: 100%不在IE中工作的CSS包裝文本


查看完整回答
反對(duì) 回復(fù) 2019-06-29
?
牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊

我也有同樣的問題,重點(diǎn)是元素沒有調(diào)整其寬度以適應(yīng)容器。

而不是使用width:100%保持一致(不要混合浮動(dòng)模型和FLEX模型)并通過添加以下內(nèi)容來使用FLEX:

.child { align-self: stretch; }

或:

.parent { align-items: stretch; }

這對(duì)我有用。


查看完整回答
反對(duì) 回復(fù) 2019-06-29
?
慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

泰勒在這里的一個(gè)注釋中,建議使用

max-width: 100%;

孩子可能會(huì)工作(為我工作)。使用align-self: stretch只有當(dāng)你不使用align-items: center(我做到了)。width: 100%只有當(dāng)你沒有多個(gè)孩子在你的柔印盒,你想要并排顯示。


查看完整回答
反對(duì) 回復(fù) 2019-06-29
  • 3 回答
  • 0 關(guān)注
  • 649 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)