使用css布局优先展示元素

最新推荐文章于 2024-05-03 12:12:21 发布

前端客户端职业研发

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量635

点赞数

分类专栏： Css 文章标签： css优先展示重要元素

本文链接：https://blog.csdn.net/weixin_42284354/article/details/102740736

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用css布局优先展示元素，比如京东商城的banner是优先展示，有2种布局方法：圣杯和双飞翼，

圣杯，容器先padding预留左右2个区域，然后优先展示先放，左右后放，浮动布局，left移动
双飞翼，容器只给宽度，优先展示部分100%撑满容器，左右两部分，浮动布局，覆盖上去

在这里插入图片描述

圣杯：

<!DOCTYPE html>
<html>
<head>
<style> 

#con {
    margin: 0 auto;
    width: 700px;
    height: 300px;
    padding-left: 100px;
    padding-right: 150px;
    background: yellow;
}

#banner {
    width: 100%;
    height: 300px;
    float: left;
    background: black;
}

#left {
    width: 100px;
    height: 300px;
    background: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px
}

#right {
    width: 150px;
    height: 300px;
    background: blue;
    float: left;
    margin-left: -150px;
    position: relative;
    right: -150px;
}
</style>
</head>
<body>
    <div id="con">
        <div id="banner">
            banner
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

双飞翼：

<!DOCTYPE html>
<html>
<head>
<style> 

#con {
    width: 1200px;
    margin: 0 auto;
}

#banner {
    width: 100%;
    height: 300px;
    background: black;
    float: left;
}

#left {
    width: 100px;
    height: 300px;
    background: red;
    float: left;
    margin-left: -100%;
}

#right {
    width: 150px;
    height: 300px;
    background: blue;
    float: left;
    margin-left: -150px;
}
</style>
</head>
<body>
    <div id="con">
        <div id="banner">
            banner
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

前端客户端职业研发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css布局优先展示元素

使用css布局优先展示元素，比如京东商城的banner是优先展示，有2种布局方法：圣杯和双飞翼，圣杯，容器先padding预留左右2个区域，然后优先展示先放，左右后放，浮动布局，left移动双飞翼，容器只给宽度，优先展示部分100%撑满容器，左右两部分，浮动布局，覆盖上去圣杯：<!DOCTYPE html><html><head><style...
复制链接

扫一扫

专栏目录