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 条评论
登录 后参与评论

相关文章

来自专栏禹都一只猫博客

Go语言简介 — 特性

13010
来自专栏c#开发者

如何在DataGrid里面产生滚动条而不滚动题头

我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以...

386110
来自专栏技术博客

JavaScript开发中几个常用知识点总结

  最近在做项目的时候自己写了一些JavaScipt代码,于是自己又进行简单的查阅资料整理了一下,发现了如下几个比较有用的知识点:

10140
来自专栏魂祭心

原 利用Appdomain动态加载程序集,

36980
来自专栏佳爷的后花媛

前端面试题整理

两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

47420
来自专栏小灰灰

Java 实现 markdown转Image

markdown 转 image 前段时间实现了长图文生成的基本功能,然后想了下能否有个进阶版,直接将markdown生成渲染后的图片呢? 思路 有不少的库...

34550
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

29860
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

1.3K30
来自专栏GIS讲堂

OpenLayers3基础教程——OL3 介绍control

相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control:

21640
来自专栏Linux驱动

17.QT-事件处理分析、事件过滤器、拖放事件

21120

扫码关注云+社区

领取腾讯云代金券