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

<!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. sql - and - or

    sql - and SQL AND links together two or more conditional statements for increased filtering when run ...

  2. js中test，exec和match方法

    test test 返回 Boolean,查找对应的字符串中是否存在模式. var str = "1a1b1c";var reg = new RegExp("1.&quo ...

  3. 转载--配置WAMP开发环境

    转自:http://www.cnblogs.com/cardon/archive/2009/12/13/1622935.html 本例安装文件在这里下载       apache2.2.4 MySQL ...

  4. HDU-1896 Stones

    http://acm.hdu.edu.cn/showproblem.php?pid=1896 题意:一个人从0开始走起,遇到偶数个石头就踢.要是同一位置有多个石头,则先扔最重的石头(也就是扔的最近的那 ...

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

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

  6. 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题。

    从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Cl ...

  7. Spark常见错误汇总

    1. Spark Driver cannot bind on port0, SparkContext initialized failed 如果是通过spark-submit等命令行提交的任务,在sp ...

  8. 【CSS3】Advanced4：Advanced Colors

    1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...

  9. Html笔记(六)超链接

    超链接标签: <a> 两种用法: 一.超链接 <a href=""> 例: <a href="http://www.sina.com.cn& ...

  10. [读书笔记]算法(Sedgewick著)·第二章.初级排序算法

    本章开始学习排序算法 1.初级排序算法 先从选择排序和插入排序这两个简单的算法开始学习排序算法.选择排序就是依次找到当前数组中最小的元素,将其和第一个元素交换位置,直到整个数组有序. public s ...