美文网首页
另类圣杯布局

另类圣杯布局

作者: 郑伟的菜园子 | 来源:发表于2016-11-28 10:54 被阅读41次

这个是在研究国美移动端的时候测出来的,之前真没这样想过,太牛逼了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            height: 50px;
            background: green;
        }
        .right{
            float: right;
            height: 50px;
            background: pink;
        }
        .center{
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left">a</div>
         <div class="right">c</div>
        <div class="center">b</div>
    </div>
</body>
</html>

相关文章

  • 另类圣杯布局

    这个是在研究国美移动端的时候测出来的,之前真没这样想过,太牛逼了

  • 实现三栏布局的六种方式

    六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...

  • CSS 经典三列布局之圣杯布局

    圣杯布局 圣杯布局是典型的 CSS 布局问题,有着众多的解决方案。 圣杯布局是一种非常经典和常用的布局方式,其所指...

  • 经典CSS布局:双飞翼和圣杯布局

    圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS

  • 圣杯布局和双飞翼布局

    圣杯布局 双飞翼布局

  • 圣杯布局

    聊聊css的圣杯布局,一般面试中面试官也问得比较多。 圣杯布局 圣杯布局针对的是左右栏固定,中间栏自适应的网页布局...

  • flex布局及常用属性

    flex 布局 demo 圣杯响应式布局

  • 实现两边定宽,中间自适应

    标签(空格分隔): css 圣杯布局和双飞翼布局、flex布局 定义 圣杯布局(双飞翼布局):两边定宽,中间宽度自...

  • CSS布局分类

    两栏布局 三栏布局 双飞翼布局 圣杯布局

  • CSS 布局

    实现三栏布局:高度固定,中间自适应,左右宽度是 300px。(div 标签的位置) 布局一:圣杯布局 圣杯布局和双...

网友评论

      本文标题:另类圣杯布局

      本文链接:https://www.haomeiwen.com/subject/xgcopttx.html