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

<!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. 应付系统选项 Payables Options

    (N) AP > Setup > Options > Payables Options应付系统选项设置整个应付系统使用的控制项和默认值.我们可以在此窗口中设置默认值,从而简化供应商输 ...

  2. hdu4722Good Numbers(dp)

    链接 这题规律其实挺明显的 打表找规律估计都可以 正规点就是DP 算出第N位所包含的good number的数量 如果给出的数是N+1位 就枚举各位上比原来小的数 加上下一位的dp值 一个i写成g了 ...

  3. Shape 与 InlineShape 的区别

    Shape 对象代表文档中的图形对象,InlineShape 代表文档中的嵌入式图形对象.所谓嵌入式图形对象,是指将图像作为文字处理,在排版上以文字的方式进行排版. Shape 与 InlineSha ...

  4. BrnShop开源网上商城第一讲：架构设计

    首先在此感谢大家对BrnShop项目的支持和鼓励!我们在发布BrnShop以前曾推测项目会受到不少园友的支持,但没想到园友们的支持大大超过我们的预测.4天6000次浏览,140个推荐,170个评论,8 ...

  5. 图文教您轻松学会用PS设计制作名片

    图文教您轻松学会用PS设计制作名片 http://jingyan.baidu.com/article/49711c614e7370fa441b7ca3.html

  6. [Jacky] 解决Ext.Net GridPanel 选择的行数据刷新后不能获取最新值

    选择GridPanel中一行数据,当变更数据时并重新刷新之后不能获取最新值,需通过如下方式获取: var internalId = gridPanel.getSelectionModel().getL ...

  7. 初谈SQL Server逻辑读、物理读、预读【转】

    前言 本文涉及的内容均不是原创,是记录自己在学习IO.执行计划的过程中学习其他大牛的博客和心得并记录下来,之所以想写下来是为了记录自己在追溯的过程遇到的几个问题,并把这些问题弄清楚. 本章最后已贴出原 ...

  8. 【原】Spark中Stage的提交源码解读

    版权声明:本文为原创文章,未经允许不得转载. 复习内容: Spark中Job如何划分为Stage http://www.cnblogs.com/yourarebest/p/5342424.html 1 ...

  9. vijosP1289 老板娘的促销方案

    vijosP1289 老板娘的促销方案 链接:https://vijos.org/p/1289 [思路] 组合公式+高精度. 如果n-m<2则无解. 否则对于第一个询问:ans=C(n-m,2) ...

  10. Mac Vim 如何设置高亮

    首先进入如下目录 cd /usr/share/vim 然后打开vimrc sudo vim vimrc 在vimrc中的“set backspace=2”这行下插入如下代码: set ai " ...