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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Flex 項目在 IE 中無法正確填充

Flex 項目在 IE 中無法正確填充

Go
慕工程0101907 2023-08-21 15:11:25
這是我的小提琴:小提琴有一個固定高度的包裝紙。內容部分應該像小提琴一樣拉伸并填充間隙。但問題出在 IE 上,它被破壞了。我flex: 1 0 auto;已經嘗試過內容包裝但運氣不佳。<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貢獻1831條經驗 獲得超10個贊

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

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

jsfiddle 演示:https://jsfiddle.net/xygsmawh/ 在 IE11 中測試和運行https://jsfiddle.net/xygsmawh/embedded/result,css,html,js

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

.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>


查看完整回答
反對 回復 2023-08-21
  • 1 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號