专栏首页前端儿CSS布局 -- 左右定宽,中间自适应

CSS布局 -- 左右定宽,中间自适应

左右定宽,中间自适应

有几种方法可以实现

改变窗口大小看看?

方案一:

左右设置绝对定位,定宽,中间设置margin-left  margin-right

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽,中间自适应(1)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 220px;
        background: #aaa;
    }
    .middle{ 
        margin-left: 200px;
        margin-right: 220px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="middle">
        <h4>middle</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBB
        888888888888888888
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
</body>
</html>

方案二:

采用负边距处理。左中右都float:left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽,中间自适应(2)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        margin-left: -100%;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        float: left;
        margin-left: -220px;
        width: 220px;
        background: #aaa;
    }
    .middle{ 
        float: left;
        width: 100%;
    }
    .middle-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="middle">
    <div class="middle-inner">
        <h4>middle</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
        </div>
    </div> 
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>

      <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBB
        888888888888888888
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
</body>
</html>

方案三:

左边使用float:left 右边用float:right,html代码中的中间部分要放后边

查看 demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽,中间自适应(3)</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left{
        float: left;
        width: 200px;
        border: 1px solid #333;
        background: #aaa;
    }
    .right{
        float: right;
        width: 220px;
        background: #aaa;
    }
    .middle{ 
        margin-left: 200px;
        margin-right: 220px;
        border: 1px solid #333;
        background: #ccc;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBB
        888888888888888888
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
        <div class="middle">
        <h4>middle</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS布局 -- 左侧定宽,右侧自适应

    书童小二
  • CSS常见兼容性问题总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

    书童小二
  • CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。

    书童小二
  • 几种常见的 CSS 布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    夜尽天明
  • 几种常见的CSS布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    Nealyang
  • (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!

    Tz一号
  • CSS3圆角、opacity 透明度、rgba 背景色设置

    设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px;

    Devops海洋的渔夫
  • 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

    欲休
  • javascript当中div在单行(float:left)用法

    div在单行(float:left) 例 1.2.1 divInOneLineIEFF.html <div style="width:100px"> ...

    马克java社区
  • 网页性能管理详解

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。 ? 你会有什么反应?我猜想,大多数用户会...

    ruanyf

扫码关注云+社区

领取腾讯云代金券