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

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

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

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


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

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



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


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



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 2,026评论 0 12
  • 参考博客:http://www.jianshu.com/p/870451cb4eb0 Charles主要做了两件事...
    frankisbaby阅读 1,074评论 0 1