布局之圣杯布局

最新推荐文章于 2022-12-29 20:48:01 发布

Mr.Moon.dsl

最新推荐文章于 2022-12-29 20:48:01 发布

阅读量126

点赞数

分类专栏： CSS 文章标签：布局

本文链接：https://blog.csdn.net/weixin_44112242/article/details/103067721

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

圣杯布局:
是指三行三列布局上下定宽中间分三列左右定宽中部自适应
主要实现中间主题部分中的左右定宽+中间自适应的布局效果
例如:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局一</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
#parent{
    height: 300px;
    margin-left: 300px;
    margin-right: 300px;
}
#left,#center,#right{
    height: 300px;
    float: left;
}
#left,#right{
    /*定宽*/
    width: 300px;
  
}
#left{
    background-color: #c9394a;
    /**当前元素从当前行移动上一行同一个位置*/
    margin-left: -100%;
    position: relative;
    /**将元素移动理想位置*/
    left: -300px;
    
}

#center{
    width: 100%;
    background-color: green;
   
}

#right{
    background-color: #cccccc;
    margin-left: -300px;
    position: relative;
    right: -300px;
}

</style>
</head>
<body>
    <div id="parent">
        <!--搜素引擎的友好-->
        <div id="center"></div>
        <div id="left">左:定宽</div>
        <div id="right">右:定宽</div>
    </div>
        
</body>
</html>

示例图
在这里插入图片描述

Mr.Moon.dsl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
布局之圣杯布局

圣杯布局:是指三行三列布局上下定宽中间分三列左右定宽中部自适应主要实现中间主题部分中的左右定宽+中间自适应的布局效果例如:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>圣杯布局一</title><s...
复制链接

扫一扫