对于这个布局方式我们可以是用绝对定位的方式来实现这个效果

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ margin:0px; padding:0px;}
.left{ width:200px; height:500px; background:#666; position:absolute;left:0; top:0;}
.right{ width:300px; height:500px; background:#009; position:absolute; right:0; top:0;}
.crent{ height:500px; background:#069; margin:0 300px 0 200px;}
</style>
</head>

<body>
<div class="left"></div>
<div class="crent"></div>
<div class="right"></div>
</body>
</html>
如果想要使得中间有空隙的话就只要改一下right 和left的值就可以了margin:0 310px 0 210px;

HTML左边和右边是固定的宽度但是中间是自动的布局方式的更多相关文章

  1. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  2. Winfrom固定Label宽度，根据文本动态改变Label的高度 z

    Label,要固定住宽度,然后根据文本的长度来动态改变高度,一开始去网上找解决方案,各种根据字体大小啊,字数啊来动态改变,但是效果却不怎么好.最后灵机一动,想起了偶尔用过一次的FlowLayoutPa ...

  3. 固定UILabel宽度分行显示

    固定UILabel宽度分行显示 这种小伎俩估计都被用烂了,笔者给大家提供一个category文件,供大家简单设置哦. 各种富文本效果哦(普通文本也是可以用的呢): 3行,固定宽度200 2行,固定宽度 ...

  4. DataTables固定表格宽度（设置横向滚动条）

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  5. echarts固定柱子宽度(barWidth)

    series: [            {                name: '',                yAxisIndex: 0,                type: ' ...

  6. layui静态表格固定td宽度,table固定td宽度

    正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...

  7. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  8. Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！

    最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...

  9. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

随机推荐

  1. Python Anaconda2 (64-bit) 安装后启动jupyter-notebook默认目录更改

    看了网上很多关于更改 python notebook的,好麻烦,所以想了一招. python notebook 现在改名叫 jupyter-notebook ,被集成在Anaconda中. Anaco ...

  2. 转自 Good morning 的几句精辟的话

    1.志愿者招募 根据流量平衡方程来构图非常方便,而且简单易懂,以后可能成为做网络流的神法之一 简单记一下流量平衡方程构图法的步骤: a.列出需求不等式 b.通过设置松弛变量,将不等式变成等式 c.两两 ...

  3. 如何从Win7中提取制作Windows PE3.0

    在D盘新建文件夹winpe,在winpe中新建sources.pe3和new文件夹,把附件中提供的工具imagex连文件夹一起放到winpe目录中. 制作方法: 1.把windows7光盘(或光盘镜像 ...

  4. 安卓使用WIFI调试程序

    不知怎么回事,USB老是掉,真心烦.于是想着用WIFI可不可以调试呢,去百度一搜,果然可以.下面我说一下我的方案. 1.使用APWIFI创建WIFI热点,用安卓手机连接该热点,试试手机可以上网不. 2 ...

  5. HDU 3416 Marriage Match IV dij+dinic

    题意:给你n个点,m条边的图(有向图,记住一定是有向图),给定起点和终点,问你从起点到终点有几条不同的最短路 分析:不同的最短路,即一条边也不能相同,然后刚开始我的想法是找到一条删一条,然后光荣TLE ...

  6. C# 日期转换为中文大写

    /// <summary> /// 日期转换为中文大写 /// </summary> public class UpperConvert { public UpperConve ...

  7. Microsoft SQL Server，错误:2；SQL Server配置管理器（本地）—远程过程调用失败

    本机是先安装sqlserver2008,后安装vs2012 在安装sqlserver2008后,运行sqlserver2008正常,接着安装vs2012,再运行sqlserver2008,问题出现了, ...

  8. Mac OS X Mountain Lion安装Bochs

    基本步骤可以看这个帖子 http://hi.baidu.com/any_where/item/990c0acdfbd6542c47d5c003 大体是: 1.安装x11; 2.开启Mac OS X的r ...

  9. linux驱动程序之电源管理之新版linux系统设备架构中关于电源管理方式的变更

    新版linux系统设备架构中关于电源管理方式的变更 based on linux-2.6.32 一.设备模型各数据结构中电源管理的部分 linux的设备模型通过诸多结构体来联合描述,如struct d ...

  10. 第4章 类型基础 -- 4.1 所有类型都从System.Object派生

    4.1 所有类型都从System.Object派生 “运行时”要求每个类型最终都从System.Object类型派生. 由于所有类型最终都从System.Object派生,所以每个类型的每个对象都保证 ...