<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/css">
body{padding:0;margin:0;}
div{
height:100%;
}
#mid {
z-index:2;
background-color:#eee;
width:500px;
margin-left:-250px;
position:absolute;
top:0;
left:50%;
}
#left,#right {
z-index:1;
position:absolute;
top:0;
width:50%;
}
#left {
left:0;
}
#left .container {
margin-right:250px;
background-color:#bbb;
}
#right {
right:0;
}
#right .container {
margin-left:250px;
background-color:#bbb;
}
</style>
</head>
<body>
<div id="mid">
mid 宽度固定 : 500px
</div>
<div id="left">
<div class="container">
left 宽度自适应
</div>
</div>
<div id="right">
<div class="container">
right 宽度自适应
</div>
</div>
</body>
</html>
相关推荐
使用css实现的三列布局，中间一列宽度固定大小，两边宽度要自适应。
下面和大家一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
CSS布局实例[绝对定位:一栏固定,一栏自适应]
呵呵 很好哦 css自适应宽度的按钮！
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
div+css菜单导航布局自适应宽度，纯div+css
div宽度自适应布局(左边自适应)
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
div+css布局 三行三列 中间自适应
介绍流体布局的实现原理和方法 自适应css布局
今天写一个供给大家参考学习，希望大家可以在这个基础上衍生一些其他的，比如三栏布局的那种：左右固定，中间自适应的效果等等 使用方法： 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
插件描述：CSS3自适应手机布局. 参考示例：http://www.jq22.com/jquery-info5613
CSS自适应宽度按钮
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见 1. float布局 最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏： <style> .left { float: left; width: 100px; ...
div+css模板布局 右侧固定，左侧自适应
主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮