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

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

使用 Flexbox 設置等高列

使用 Flexbox 設置等高列

Go
嚕嚕噠 2023-08-21 15:09:41
我知道一個使用以下方法創建等高列的解決方案display:table:.row {    display: table;    width: 100%;}.col{    display: table-cell; }但我的情況有點不同,因為我使用的是 flexbox 并且 row 類有display:flex:.row {  display: flex;  display: ms-flex;  flex-wrap: wrap;}所有的列都有.large-4類:.large-4 {   width: 25%;   max-width: 25%;  flex: 0 0 30%;}我也不能使用flex:1for ,因為它在不同的視口中有所不同。.large-4這是一個 html 片段:<div class="row">  <div class="large-4">    <div class="card">      <img src="https://picsum.photos/200/200" alt="author">      <div class="card-content">        <h1 class="card-title">Title</h1>        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste          distinctio          optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam          veritatis.        </p>      </div>    </div>  </div>  <div class="large-4">    <div class="card">      <img src="https://picsum.photos/200/200" alt="author">      <div class="card-content">        <h1 class="card-title">Title</h1>        <p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.        </p>      </div>    </div>  </div>  <div class="large-4">    <div class="card">      <img src="https://picsum.photos/200/200" alt="author">      <div class="card-content">        <h1 class="card-title">Title</h1>        <p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste          distinctio.        </p>      </div>    </div>  </div></div>代碼筆鏈接可以在這里找到!如何使用 Flexbox 實現等高列?或任何其他更好的解決方案。謝謝
查看完整描述

2 回答

?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

您需要添加display: flex到.large-4元素:


.large-4 {

   width: 25%;

   max-width: 25%;

   flex: 0 0 30%;

   display: flex;

}

您會注意到,當您使用檢查器工具檢查元素時,large-4元素實際上都是相同的高度。不是里面的內容。因此,通過使父元素彎曲,它將使子元素填充空間。


查看完整回答
反對 回復 2023-08-21
?
HUX布斯

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

您已經有了等高的列,但它們內部是一個收縮到其內容的容器。展開該容器。


.card {

    height: 100%;

}


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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