资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/css常见的各种布局下----三列布局

css常见的各种布局下----三列布局

番茄西红柿 / 609人阅读

css 三列布局，左右固定宽度右边自适应

　　1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局

　　　　　1.1.1 自适应部分一定要放第一个位子，使用浮动，并且设置宽度为100%，不设置浮动元素内容不够称不开整个宽度

　　　　　1.1.2 左右固定部位，使用margin-left :负数，使其左右靠齐

　　　　　1.1.3 中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        background-color: blue; 
        /* 默认还是整行 */
        } 
    .box .box-content .child {
        margin: 0 210px;
            /* 中间模块空出左右距离，设置浮动 */
        background: red;
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多带带
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        div> 
    div>
    <footer>

    footer>
body>
html>

　　　1.2 其实只是简单的中间内容自适应，还可以设置，中间的元素块状元素盒子模型为ie下的盒子模型，

　　　　再使用padding也是可以实现的

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        /* 默认还是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中间模块空出左右距离，设置浮动 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多带带
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        div> 
    div>
    <footer>

    footer>
body>

　　2，上面其实是圣杯布局，我们再使用中间相对定位，左右两边绝对定位（中间绝对定位，不设置宽度撑不开容器）

　　　　其实只要中间的位子对应了，左右两边不管是相对定位，还是绝对定位都可以

 

　　　　重点当然还是中间怎么取定位（元素顺序没有关系）

　　　　如果中间取相对定位，不设置浮动，设置margin 空出左右距离，

　　　　两边取绝对定位，只要设置top:0 一个left:0  一个right:0

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }
    .box .box-content {
        position: relative;
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: absolute; 
        height: 300px; 
        left: 0;
        top:0;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: absolute; 
        min-height: 100%; 
        right: 0px;
        top:0;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多带带
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        div> 
    div>
    <footer>

    footer>
body>
html>

　　3.我们再看下使用定位的双飞燕布局， 双飞燕，要对父容器设置padding ,大小等一左右固定宽度

  　　左右两边据对定位，就这个和上面的方法差不多，我们一起看看左右两边相对定位

　　如果左右两边相对定位，设置margin和和left

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水
水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多带带
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        div> 
    div>
    <footer>

    footer>
body>
html>

 　　4.是用flex实现三列布局，左右固定中间自适应，父元素设置display: flex, 左右分别设置flex: 0 0 200px ，父元素为display:flex

　　　　那么子元素的float、clear和vertical-align属性将失效，兼容性有问题，一般都用于移动端

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }
                 

                                                                                                                    
                         混合云
                                             
                         私有云
                                                                                                                                                 
                                      
                     
                    
                                                                                               extjs三列式布局
                                                                                                           java中各种布局
                                                                                                           css布局
                                                                                                           css布局教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/981.html

相关文章

  • css常见的各种布局下----三列布局

    摘要：三列布局，左右固定宽度右边自适应不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局自适应部分一定要放第一个位子，使用浮动，并且设置宽度为，不设置浮动元素内容不够称不开整个宽度左右固定部位，使用负数，使其左右靠齐中间自适应部分嵌套一css 三列布局，左右固定宽度右边自适应 1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子，使...

    tigerZH 评论0 收藏0

  • css常见的各种布局下----三列布局

    摘要：三列布局，左右固定宽度右边自适应不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局自适应部分一定要放第一个位子，使用浮动，并且设置宽度为，不设置浮动元素内容不够称不开整个宽度左右固定部位，使用负数，使其左右靠齐中间自适应部分嵌套一css 三列布局，左右固定宽度右边自适应 1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子，使...

    mingde 评论0 收藏0

  • css常见的各种布局下----三列布局

    摘要：三列布局，左右固定宽度右边自适应不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局自适应部分一定要放第一个位子，使用浮动，并且设置宽度为，不设置浮动元素内容不够称不开整个宽度左右固定部位，使用负数，使其左右靠齐中间自适应部分嵌套一css 三列布局，左右固定宽度右边自适应 1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子，使...

    Joonas 评论0 收藏0

  • 前端面试之CSS总结(上)

    摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

    琛ｈ。 评论0 收藏0

  • CSS

    摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。双冒号是在当前规范中引入的，用于区分伪类和伪元素。 1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 有两种， IE 盒子模型、W3C 盒子模型； 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；区  别： IE的cont...

    Lyux 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<