<!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>
相关推荐
总的来说，实现“中间固定宽度两边自适应宽度”的三栏布局有多种方法，包括传统的浮动、绝对定位，以及现代的Flexbox和Grid布局。每种方法都有其优缺点，开发者应根据项目需求和目标浏览器的兼容性来选择合适的技术...
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
CSS网页布局入门教程8：三列浮动中间列宽度自适应 在本篇教程中，我们将探讨如何使用CSS实现三列浮动中间列宽度自适应的网页布局。这种布局方式需要满足以下要求：左栏固定宽度，居左显示；右栏固定宽度，居右显示...
在Web开发中，CSS布局技术使得页面内容按照设计意图排列展示，其中实现两栏固定宽度而中间一栏自适应剩余空间的布局是非常常见的需求。本文章将通过介绍四种不同的CSS技术实现方法，为读者提供多种布局方案。 首先...
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样...
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
这个布局的特点是中间主栏宽度固定，两边侧栏则根据主栏的大小自适应伸展，同时兼容不同浏览器，包括IE和Firefox。下面将详细介绍这一布局方式以及涉及的关键技术点。 首先，CSS（层叠样式表）在构建这种布局中起着...
"圣杯布局"和"双飞翼布局"是两种常见的前端开发技术，主要用于实现三栏式布局，其中两边固定宽度，中间区域自适应。这两种布局模式都是为了在浏览器窗口大小变化时保持页面结构的稳定性和良好的用户体验。 **圣杯...
三栏布局是指将页面分割成左右宽度不等的三列，中间列设置为自适应宽度。这种布局适用于内容上具有明显主次关系的网页。 实现方法： 1. 两边使用 float，中间使用 margin 2. 两边使用 absolute，中间使用 margin 3...
2. **三列布局**：`3c-*`文件则涉及三列布局，比如`3c-lcrc-static`，这可能是一种左中右三栏，两边固定宽度，中间自适应的布局。`3c-lcrc-static-pp`和`3c-hd-lcrc-static-pp`可能是在前者基础上添加了响应式设计，...
【圣杯布局和双飞翼布局】：这两种布局主要用于实现页面的三栏布局，其中两边固定宽度，中间自适应宽度。圣杯布局通过负边距和相对定位实现，而双飞翼布局则利用浮动和内边距来达到同样的效果。 【一边固定，另一边...
双飞翼布局是圣杯布局的变体，它们在布局结构上很相似，都是为了实现左右固定宽度、中间自适应宽度的三栏布局。不过在双飞翼布局中，中间内容区域的两侧会使用额外的div包裹层，这样做是为了防止内容部分被左右两边...
三栏布局通常指左右两边固定宽度，中间自适应宽度的布局方式。常见实现方法有两种：Flex 布局和 float 浮动。 #### Flex 布局 ```css .container { display: flex; } .left, .right { flex: 0 0 200px; /* 宽度...