栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

对齐不同块的子元素

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

对齐不同块的子元素

目前(2019/06)*使用任何CSS布局方法均无法实现。

display:subgrid解决了这个问题,但到目前为止,浏览器的非实验性应用还很有限。*

  • [2019/12更新]-Firefox 71现在提供了Subgrid。默认情况下,它在Firefox 71+中处于启用状态,因此可以进行测试。在完全采用之前,需要Javacript来平衡元素高度。

    • { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing:inherit; }

    .Grid {

    display: grid;

    width:90%;

    margin:auto;

    grid-gap: 10px;

    grid-template-columns: repeat( auto-fill, 280px);

    }

    .loon-card {

    display:grid;

    grid-row: span 5; / as we have 5 card components in each card /

    grid-template-rows:subgrid;

    border: 1px solid #ddd;

    padding: 10px;

    }

    .long-description {

    border-top: 1px solid #ddd;

    }

    .price {

    padding:.5em;

    text-align:center;

    }

    img {

    max-width:100%;

    display: block;

    }

    <img src="http://www.fillmurray.com/300/200"><div >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4</div><div >  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.</div><div >12.00$</div><button>buy</button>
    <img src="http://www.fillmurray.com/300/200"><div >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4  <br/>Title:5  <br/>Title:6</div><div >  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.</div><div >12.00$</div><button>buy</button>
    <img src="http://www.fillmurray.com/300/200"><div >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4</div><div >  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.</div><div >14.00$</div><button>buy</button>
    <img src="http://www.fillmurray.com/300/200"><div >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4</div><div >  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.</div><div >15.00$</div><button>buy</button>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/372080.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号