两列布局左边定宽，右边自适应

效果图：

代码如下：

<html>
<head>
<title>文章标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="关键字" />
<style type="text/css">
@charset "utf-8";
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{color: #000;background: #fff;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-size: 100%;
}
/* IE6对positon:fixed的单独处理修正IE6滚动抖动的bug */
*html,*html body{background-image:url(about:blank);/*修正IE6滚动抖动的bug*/background-attachment: fixed;/*根据自己实际，非必需*/
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,blockquote,th,td,img,iframe{margin: 0;padding: 0;
}
body{width: 100%;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{font: 12px/1.5 "微软雅黑","Microsoft YaHei","\5b8b\4f53","Tahoma","Arial";color: #333;outline: none;
}
input,select,textarea{font-size: 100%;
}
/* 重置button边框 */
button{border: none;
}
/* 去掉各Table cell 的边距并让其边重合 */
table{border-collapse: collapse;border-spacing: 0;
}
/* IE bug fixed: th 不继承 text-align*/
th{text-align: inherit;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th{text-align: left;
}
/* 去除默认边框 */
fieldset,img{border: none;outline: none;-moz-outline:none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display: block;
}
/* 去掉列表前的标识, li 会继承 */
ol,ul,li{list-style: none;
}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: 500;margin: 0;padding: 0;
}
/* 让链接默认不显示下划线，在hover状态下显示下划线 */
a{color: #333;cursor: pointer;outline: none;text-decoration: none;blr:expression(this.onFocus=this.blur());
}
a:hover{text-decoration: underline;
}
/* 清理浮动 */
.clearfix:before,.clearfix:after{display: block;content: " ";clear: both;
}
.clearfix{zoom: 1; /* for ie67*/
}
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{display: inline-block;*display: inline;*zoom: 1;
}
address,caption,cite,code,dfn,em,th{font-style: normal;font-weight: normal;
}
/*解决盒模型问题css3属性也可用来统一FORM元素风格*/
.box-sizing{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;
}
</style>
<style type="text/css">
#left{position:absolute;width:300px;top:0px;left:0px;background:red;height:100%;
}
#right{background:green;margin-left:300px;height:100%;
}
</style>
</head>
<body> <div id="left">左边定宽</div><div id="right">右边自适应</div>
</body>
</html>

两列布局左边定宽，右边自适应相关推荐

flex布局左边固定，右边自适应，右边内容超出会影响布局
左侧宽度固定,右侧自适应 .left-div{width: 200px; }.right-div{flex: 1; } 右边内容超出的话,就会导致左边固定的宽度大小不起重要了,这时只需要加上min-w ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
html 左边距自适应,左边定宽，右边自适应布局的几种方法
实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:. 针对这种布局,首先抽象出页面结构如下: 1 2 3 4 5 Docum ...
两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
CSS布局之两列布局
两列布局两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

两列布局左边定宽，右边自适应

两列布局左边定宽，右边自适应相关推荐

最新文章

热门文章