CSS布局篇——固宽、变宽、固宽+变宽

学了前端挺久了,最近写一个项目测试系统,布局时发现自己对变宽+固宽的布局还没有完全掌握,所以在这里总结一下,以后需要的时候回头看看。

1.最简单的当然是一列或多列固宽

例如两列固宽:

1.设置一个外围div——container,是两列显示的总大小,可以是固定800px等值。

2.在container内分别设置两个div——side、content

根据需要设置像素,比如一个是300px,另一个是500px;

分别设置float:left;

2.两列变宽,同1,只不过将像素改为百分比,例如是一个30%,另一个70%

3.重点来啦,两列或多列中有固宽,有变宽——典型的是一列左固宽,一列右变宽

1.设置一个外围div——container,是两列显示的总大小,可以是固定800px等值。

2.在container内分别设置两个div——side、wrap_content

根据需要设置宽度,比如一个是width:300px,另一个是width:
100%;

margin-right: -300px;

3.分别设置float: left;

4.在wrap_content内再设置一个div
:content,margin-right: 300px;

CSS布局篇——固宽、变宽、固宽+变宽,布布扣,bubuko.com

时间: 2024-10-01 03:42:48

CSS布局篇——固宽、变宽、固宽+变宽的相关文章

css布局篇

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="v.js"></script></head><style> *{ margin: 0;padding:0; list-style: n

css基础篇(三)——布局(下)

之所以将浮动,定位归为布局来讲,就是因为css布局技术都依赖于三个基本概念:定位,浮动和空白边的操纵; 1.固定宽度布局 1.1 居中布局 如上图:是pc端比较时髦的居中设计,而实现居中设计的方案有: 1.自动空白实现(如上图) .main{ width:1000px; marign:0 auto; } 2.定位和负值空白边 .main{ positon:relative; width:1000px; left:50%; margin-left:-500px; } 1.2 多栏布局 如上图:利用

CSS 布局总结——变宽度布局

变宽度布局 1-2-1 等比例变宽 总宽度设置 width: 85%; min-width: 650px; (关于IE6的min-width支持,可用) content 设置 width: 66%; float: left; side 设置 width: 33%; float: right; 增加clear 空div HTML 结构: <!DOCTYPE HTML> <html> <head> <title>1-2-1 等比例变宽</title>

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p

CSS总结篇—布局技巧

CSS布局技巧 单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好:不足:需要同时设置子元素和父元素 使用margin:0 au

CSS篇之DIV+CSS布局

<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

css布局 - 垂直居中布局的一百种实现方式(更新中...)

首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值) 2. vertical-middle上场: 二.父元素高度固定时,多行文本的垂直居中 1. 帮多行文本找一个继父来领养他,让继父弥补父元素给他带来的伤害(行高和水平居中对齐的样式修改) 2. margin负边距简单处理一下底部小“裂痕”

CSS 布局整理

1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div"></div> </div> CSS实现: 都设置居中 div块的宽高和背景色. #center-div { width: 100px; height: 100px; background: #2b669a;} a.用inline-block和vertical-align来实现居中: #co

Ext布局篇

  EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:     ContainerLayout(容器布局)     FitLayout(自适应布局)     AccordionLayout(折叠布局)     CardLayout(卡片式布局)     AnchorLayout(锚点布局)