CSS浮动布局案例

最新推荐文章于 2024-04-01 08:13:43 发布

weixin_33701564

最新推荐文章于 2024-04-01 08:13:43 发布

阅读量352

点赞数

原文链接：http://blog.51cto.com/13951200/2170429

版权

CSS浮动布局案例

这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识

流体布局

顾名思义流体布局就是布局格式可以随着窗口大小的变化而变化，具体实现如下

代码演示(后续CSS代码均在此代码基础上进行修改)

<body>
    <div class="container clearfix">
        <main class="main">
            <div class="content"></div>
        </main>
        <aside class="aside" ></aside>
    </div>
    <p>testtesttest</p>
</body>
</html>

CSS代码

    <style type="text/css">
        .main{
            width:100%;
            float:left;
        }
        .content{
            height:300px;
            margin:0 200px;
            background:yellow;
        }
        .aside{
            width:180px;
            height:300px;
            background:red;
            float:left;
            margin-left:-100%;
            /*流体布局的重点是边栏的左边距-100%，通过负值可以将元素强行拉到上一行*/
        }
    </style>

处理结果如下
CSS浮动布局案例

转载于:https://blog.51cto.com/13951200/2170429

weixin_33701564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动布局案例

CSS浮动布局案例这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识流体布局顾名思义流体布局就是布局格式可以随着窗口大小的变化而变化，具体实现如下代码演示(后续CSS代码均在此代码基础上进行修改)<body> <div class="container clearfix"> &l...
复制链接

扫一扫