社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > css教程 > 高度已知，左右宽度固定，实现三栏布局的5种方法

高度已知，左右宽度固定，实现三栏布局的5种方法

一个新手
发布： 2017-10-16 10:52:01
原创
1741 人浏览过

俗话说好记性不如烂笔头，写代码也是一样的道理，看过的东西如果不写一遍真的在脑子里呆不了多久。所以工作这么久慢慢把以前记录过的知识搬上来，一是为了分享，二是更好的总结！好了话不多说，进入正题。

第一种方法：float


<style>
    *{
        padding:0;
        margin:0;
    }
    .big div{
        height:100px;
    }
    .big .left{
        width:300px;
        float:left;
        background:red;
    }
    .big .right{
        width:300px;
        float:right;
        background:yellow;
    }
    .big .center{
        background:blue;
    }
</style>
<body>
<div class="big">
    <div class="left">
       
    </div>
    <div class="right">
      
    </div>
    <div class="center">
        浮动解决方案
    </div>
</div>
登录后复制

第一种解决方案基本上没有什么难度，平时应该也会用到很多！

第二种方法：绝对定位

<span style="color: #008080"> <style><br/> .position{<br/>        margin-top:10px;<br/>    }<br/>    .position>div{<br/>        position:absolute;<br/>        height:100px;<br/>    }<br/>    .position .left{<br/>        left:0;<br/>        width:300px;<br/>        background:red;<br/>    }<br/>     .position .right{<br/>        right:0;<br/>        width:300px;<br/>        background:yellow;<br/>    }<br/>    .position .center{<br/>        left:300px;<br/>        right:300px;<br/>        background:blue;<br/>    }<br/></style><br/><body><br/><div class="position"><br/>    <div class="left"><br/>       <br/>    </div><br/>    <div class="right"><br/>      <br/>    </div><br/>    <div class="center"><br/>        绝对定位方案2<br/>    </div><br/></div><br/></body></span><span style="color: #0000ff"></span>
登录后复制

第二种方法也是轻松实现效果。

第三种方法：flexbox

<style>
 .flex{
        margin-top:120px;
        display:flex;
    }
    .flex>p{
        height:100px;
    }
    .flex .left{
        width:300px;
        background:red;
    }
    .flex .center{
        flex:1;
        background:blue;
    }
    .flex .right{
        width:300px;
        background:yellow;
    }</style><body><p class="flex">
    <p class="left">
       
    </p>
    <p class="center">
        flex方案    </p>
    <p class="right">
      
    </p></p></body>
登录后复制

第四种方法：表格布局

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">.table</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        margin-top</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">10px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">100%</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        display</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">table</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">100px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table>p</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        display</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">table-cell</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
     .table .left</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">red</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table .center</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">blue</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
    .table .right</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><br/><br/><span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="table"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="left"</span><span style="color: #0000ff">></span>
       
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="center"</span><span style="color: #0000ff">></span><span style="color: #000000">
        table方案    </span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="right"</span><span style="color: #0000ff">></span>
      
    <span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
登录后复制

table方案同样实现，只是现在我们可能已经很少使用表格布局了。

第五种方法：网格布局grid

<style>
  .grid{
        margin-top:10px;
        display:grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-columns: 300px auto 300px;
    }
    .grid .left{
        background:red;
    }
    .grid .center{
        background:blue;
    }
    .grid .right{
        background:yellow;
    }</style><body><p class="grid">
    <p class="left">
       
    </p>
    <p class="center">
        grid方案    </p>
    <p class="right">
      
    </p></p></body>
登录后复制

网格布局方法也是实现了，CSS3的网格布局有点类似于bootstrap的栅格化布局，都是以网格的方式来划分元素所占的区块。

问题没有结束，我们继续讨论。五种解决方案哪一个更好呢？笔者一直认为技术没有好坏之分，完全取决于你用在什么地方。

个人认为五种方法的优缺点：

1.浮动：兼容性好，如果对兼容性有明确的要求使用浮动应该满足需求，但是一定要处理好与周边元素的关系，因为一不注意浮动就可能造成页面布局混乱等问题，不过解决浮动带来的副作用方法也不少这里我们不做讨论。

2.绝对定位：简单直接，但是会使父元素脱离正常文档流里面的子元素也会跟着脱离。

3.flex:目前看来比较完美，不过现在稍微完美一点的技术都存在或多或少的兼容性问题，同样这个样式IE8下是不支持的！（IE呀！）

4.表格布局：表格布局虽然没有什么大的问题，但是在我们要细化结构的时候会显得很繁琐，同时表格布局三个单元格的高度会一起变动也不利于我们进行布局。

5.网格布局：代码优美简洁，不过还是兼容性问题。但是未来是美好的！

以上是高度已知，左右宽度固定，实现三栏布局的5种方法 的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
固定 宽度 左右
来源：php.cn
上一篇：纯CSS3实现轮播图的方法 下一篇：如何理解css3中的线性渐变
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
2
1429
使用网格创建此特定设计：分步指南 我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
使用具有 3 级层次结构的自定义分类法选择 woocommerce 相关产品 我有一家woocommerce商店，其自定义分类为“运动”。该分类具有三个级别-父级、子级、子级-例如：室内运动>竞技场运动>篮球。如果用户查看篮球项目，那么我希望相关...
来自于 2024-04-06 20:05:30
0
1
544
使用 Axios 和 Node.js 从 PokeAPI 获取特定统计信息 (Stats) 时遇到问题 我有一个问题，我正在尝试使用PokemonAPI，但是当我尝试访问攻击、HP和速度统计信息时，它显示所有Pokemon的undefined！谁能告诉我API调用出了什么问题？con...
来自于 2024-04-06 18:46:35
0
1
464
在模板中使用在方法中定义的变量 这是我第一次使用Vue（v2而不是v3），并且我一直在尝试在模板内使用变量（在方法内定义）。我的简化代码：<template><divclass="co...
来自于 2024-04-06 18:10:25
0
2
513
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板