我知道一個使用以下方法創建等高列的解決方案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 回答
- 0 關注
- 181 瀏覽
添加回答
舉報
0/150
提交
取消