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

<!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. 使用git批量删除分支

    要删除本地,首先要考虑以下三点 列出所有本地分支 搜索目标分支如:所有含有‘dev’的分支 将搜索出的结果传给删除函数 所以我们可以得到: git br |grep 'dev' |xargs git ...

  2. poj2723

    把每对钥匙看做一个变量,那两个钥匙看做他的两个状态 每一个开门的要求就是一个条件(xi or xj) 很显然有了2sat的基本要素 2sat是一个判定性问题,而这题求最多能过几个门: 不难想到二分答案 ...

  3. GridView導出Excel 解決亂碼問題

    Response.Clear(); Response.Charset = "gb2312"; Response.Buffer = true; Response.AddHeader( ...

  4. jQuery-单击文字或图片内容放大显示效果插件

    css很强大,jQuery也很强大,两者结合在一起就是无比强大.这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物. 先来介绍css和jQuery各自发挥了什么作用吧: css: ...

  5. C# System.Attribute(验证类)

    本文以一个项目中通用的验证类来举例说明如何使用自定义Attribute来扩展元数据.  在项目中,我们为了保证各个层次之间的松藕合,通常把在各个层次之间传递数据的封装在一个称为实体类的类中,比如Act ...

  6. HDU 2647

    思路:拓扑排序 #include<stdio.h> #include<string.h> typedef struct { int to; int next; }EdgeNod ...

  7. java基础之运算符

    运算符是用于表示数据的赋值,运算和比较的一种特殊符号.1.赋值运算符:=,+=,-=,*=,/=,%= x=1;x+=2;(相当于x=x+2,等于3),其他运算符同理 2.算术运算符:+,-,*,/, ...

  8. Mac OS X Mountain Lion安装Bochs

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

  9. HW2.11

    控制台: import java.util.Scanner; public class Solution { public static void main(String[] args) { Scan ...

  10. JQuery Dialog 禁用X按钮关闭对话框，-摘自网络

    JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({   closeOnEscape: false,   open: ...