前端面试题怎么实现品字布局

实现品字布局,其实有很多方法,比如说定位,浮动,当面试官问到我们这个问题的时候,其实他是想知道你的布局思想,而不是单单的写出布局就好了

下面我们列出以下几种方法

第一种,利用float属性,对应样式与页面如下


前端面试题怎么实现品字布局_第1张图片
前端面试题怎么实现品字布局_第2张图片

还有一种方法就是当div有具体宽度的时候该怎么实现呢

此时可以利用display:inline-block,或者float:left  但是 display:inline-block会出现间隙,建议使用float 


前端面试题怎么实现品字布局_第3张图片
前端面试题怎么实现品字布局_第4张图片


左边的要margin-left使其在页面中间,右边margin-left的值是其宽度的两倍,即可实现


前端面试题怎么实现品字布局_第5张图片

当然我们也可以用flex布局来实现


前端面试题怎么实现品字布局_第6张图片


前端面试题怎么实现品字布局_第7张图片

你可能感兴趣的:(前端面试题怎么实现品字布局)