css实现三列布局,左右固定值,中间自适应。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css实现三列布局,左右固定值,中间自适应。相关的知识,希望对你有一定的参考价值。

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白。

 

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>三列布局,左右固定值,中间自适应</title>
    <style type="text/css">
        .container{position: relative;}
        .left{position:absolute;left:0;top:0;width: 200px;height:500px;background-color: #f34;}
        .right{position: absolute;right: 0;top:0;width: 300px;height:500px;background-color: #fcc;}
        .middle{margin:0 300px 0 200px;height:500px;background-color: #ccc;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

 那么它呈现在页面上的样子则是这样的

技术分享

以上是关于css实现三列布局,左右固定值,中间自适应。的主要内容,如果未能解决你的问题,请参考以下文章

CSS 布局实例系列如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

CSS三栏布局实现,左右固定,中间自适应

《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应

css布局的几种方式

三列布局_左右固定_中间自适应

页面布局方案-左右固定,中间自适应