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

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

Flex 項(xiàng)目在 IE 中無法正確填充

Flex 項(xiàng)目在 IE 中無法正確填充

Go
慕工程0101907 2023-08-21 15:11:25
這是我的小提琴:小提琴有一個(gè)固定高度的包裝紙。內(nèi)容部分應(yīng)該像小提琴一樣拉伸并填充間隙。但問題出在 IE 上,它被破壞了。我flex: 1 0 auto;已經(jīng)嘗試過內(nèi)容包裝但運(yùn)氣不佳。<div class="col">  <div class="item" style="height: 670px;">  <div class="view-mode-featured summary-style-visible">    <div class="front-illustration-image">      <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">        <div class="field-items">          <div class="field-item even">            <a href="">              <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">            </a>          </div>        </div>      </div>      <div class="group-content-group field-group-div">        <div class="field field-name-field-title-prefix field-type-text field-label-hidden">          <div class="field-items">            <div class="field-item even">Prefix</div>          </div>        </div>        <h2 class="title">          <a href="" class="node-title-link">            <div class="field-name-title">              <div class="">– Text </div>            </div>          </a>        </h2>        <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">          <div class="field-items">            <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekret?r Eldar Berli i NJFF.</div>          </div>        </div>      </div>    </div>  </div></div></div>有任何想法嗎 ?
查看完整描述

1 回答

?
慕哥6287543

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

為了避免你的 flex 子元素變得瘋狂,你可以設(shè)置 flex-shrink 并增長到 0

需要更新才能工作(至少 IE11):.field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}

jsfiddle 演示:https://jsfiddle.net/xygsmawh/ 在 IE11 中測(cè)試和運(yùn)行https://jsfiddle.net/xygsmawh/embedded/result,css,html,js

片段以在其他瀏覽器中證明該修復(fù)是無害的:

.field{ flex: 0 0 auto;/* IE11 fix : avoids those extra large empty gaps */}



body{

  background:#ddd;

}

img {

    width: 100%;

}


.col{

  float: left;

  width: 33.33333%;

}



.view-mode-featured {

    height: 100%;

}


.front-illustration-image {

    height: 100%;

    display: flex;

    flex-direction: column;

}


.group-content-group {

    flex: 1;

    flex-direction: column;

    display: flex;

    background:white;

    padding: 1rem;

    border-bottom: 2px solid white;

    display: flex;

    flex-direction: column;

    border-bottom: 2px solid #999999;

}

<div class="col">

  <div class="item" style="height: 670px;">

  <div class="view-mode-featured summary-style-visible">

    <div class="front-illustration-image">

      <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">

        <div class="field-items">

          <div class="field-item even">

            <a href="">

              <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">

            </a>

          </div>

        </div>

      </div>

      <div class="group-content-group field-group-div">

        <div class="field field-name-field-title-prefix field-type-text field-label-hidden">

          <div class="field-items">

            <div class="field-item even">Prefix</div>

          </div>

        </div>

        <h2 class="title">

          <a href="" class="node-title-link">

            <div class="field-name-title">

              <div class="">– Text </div>

            </div>

          </a>

        </h2>

        <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">

          <div class="field-items">

            <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekret?r Eldar Berli i NJFF.</div>

          </div>

        </div>

      </div>

    </div>


  </div>

</div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-08-21
  • 1 回答
  • 0 關(guān)注
  • 134 瀏覽

添加回答

舉報(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)