人因梦想而伟大

首页前端开发正文

WordPress经典的两栏自适应布局是怎么实现的?

朱绪2017-05-311309CSS

wordpress站点很多都用到了自适应两列布局。

自适应两列布局,指的是在两列布局中,其中一列的宽度是固定死的,而另外一列的宽度自适应。

如果使用浮动来做,只可以实现固定的左右两列布局,并不可以实现其中一列是自适应的布局。

案例的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #main,#sidebar{
            float: left;
            color: white;
        }
        #main{
            width: 100%;
            margin-right: -200px;
            background-color: hotpink;
        }
        #sidebar{
            width: 200px;
            background-color: lightskyblue;
        }
        /* 防止浏览器可视区域宽度不足时发生文本重叠 */
        #main p{
            margin-right: 210px;
        /* 它是200px + 10px,10px是他们的间距 */
        }
    </style>
</head>
<body>
    <div id="main"><p>这是主体部分,自适应宽度</p></div>
    <div id="sidebar"><p>这是侧边栏部分,固定宽度</p></div>
</body>
</html>

浏览器预览效果如下图:

自适应两列布局

我们再通过调整浏览器的宽度,就可以清晰地看出自适应两列布局的实际效果。

网友评论