CSS布局：三栏布局，中间栏固定宽度，左右两边自适应

被这样一个题目的布局难住了，回来思考了一下，只能想到JS控制，今天在群里面咨询了一下，@狄烁STEC 提到一个很好的方法, 很好

代码如下：

<!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>

转载于:https://www.cnblogs.com/NNUF/archive/2012/03/27/2419522.html

CSS布局：三栏布局，中间栏固定宽度，左右两边自适应相关推荐

CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
CSS+DIV三种布局方式
在学习了盒模型.块级元素和行内元素得到概念后,我们来说一下CSS的一个比较重要的用途:布局.以前我们学过表格可以起到布局页面的作用,比如布局表单,但实际工作表格的布局通常也仅仅是用来布局表单.绝大多数 ...
CSS的三种布局方式
前言所谓布局,就是指定把一个盒子放在合适的位置称为"布局" 流式布局(最简单,盒子的默认布局) 百分比布局,通过盒子的宽度(百分比)来根据屏幕的宽带来进行收缩,不受固定像素的限制 ...
移动端布局(三) rem布局及原理
什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小. s1.s2.s5.s6的font-size和line-he ...
关于页面的多种自适应布局——三列布局
简单结构1,列表在前,更多列表在中间,内容在后 1 <style type="text/css"> 2 .layout{background-color:gray; p ...
css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
文章目录三列布局背景介绍定位实现三列布局浮动实现三列布局圣杯布局双飞翼布局三列布局背景介绍三列元素,左右元素固定宽度: 中间元素自适应: <div id="left&qu ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
CSS || 三栏布局，两边固定，中间自适应
1 float实现基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin ...
用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
css三栏布局技巧,CSS-三栏布局的常用6种方法
三栏布局一般指左右两栏固定宽度,中间一栏自适应的布局方法,也是许多网站常用的布局方式.如下图: 该示例在一个html文件中编写,为方便起见,预先写好一个通用的css,左右宽度都为100px: 1.浮动 ...

CSS布局：三栏布局，中间栏固定宽度，左右两边自适应

CSS布局：三栏布局，中间栏固定宽度，左右两边自适应相关推荐

最新文章

热门文章