css常见的各种布局下----三列布局
css 三列布局，左右固定宽度右边自适应
1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局
1.1.1 自适应部分一定要放第一个位子，使用浮动，并且设置宽度为100%，不设置浮动元素内容不够称不开整个宽度
1.1.2 左右固定部位，使用margin-left :负数，使其左右靠齐
1.1.3 中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-content {
height: 100%;
float: left; /* 一定要设置浮动，要不下面的模块上不来 */
width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
background-color: blue;
/* 默认还是整行 */
}
.box .box-content .child {
margin: 0 210px;
/* 中间模块空出左右距离，设置浮动 */
background: red;
height: 100%;
}
.box .box-left {
width: 200px; float: left;
margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */
height: 300px;
background-color: green;
}
.box .box-right {
float: left;
width: 200px;
min-height: 100%;
margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child">
中间主题内容
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
</html>
1.2 其实只是简单的中间内容自适应，还可以设置，中间的元素块状元素盒子模型为ie下的盒子模型，
再使用padding也是可以实现的
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-content {
box-sizing:border-box;
height: 100%;
float: left; /* 一定要设置浮动，要不下面的模块上不来 */
width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
/* 默认还是整行 */
padding:0 210px;
}
.box .box-content .child {
/* 中间模块空出左右距离，设置浮动 */
background-color: blue;
height: 100%;
}
.box .box-left {
width: 200px; float: left;
margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */
height: 300px;
background-color: green;
}
.box .box-right {
float: left;
width: 200px;
min-height: 100%;
margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child"><!-- 这个div只是为了方便看，设置了以下背景色 可用可不用，内容区还是自适应的 -->
中间主题内容
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
2，上面其实是圣杯布局，我们再使用中间相对定位，左右两边绝对定位（中间绝对定位，不设置宽度撑不开容器）
其实只要中间的位子对应了，左右两边不管是相对定位，还是绝对定位都可以
重点当然还是中间怎么取定位（元素顺序没有关系）
如果中间取相对定位，不设置浮动，设置margin 空出左右距离，
两边取绝对定位，只要设置top:0 一个left:0 一个right:0
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
overflow: hidden;
}
.box .box-content {
position: relative;
height: 100%;
margin-left: 210px;
margin-right: 210px;
background-color: blue;
}
.box .box-left {
width: 200px;
position: absolute;
height: 300px;
left: 0;
top:0;
background-color: green;
}
.box .box-right {
width: 200px;
position: absolute;
min-height: 100%;
right: 0px;
top:0;
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child">
中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
</html>
3.我们再看下使用定位的双飞燕布局， 双飞燕，要对父容器设置padding ,大小等一左右固定宽度
左右两边据对定位，就这个和上面的方法差不多，我们一起看看左右两边相对定位
如果左右两边相对定位，设置margin和和left
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
overflow: hidden;
padding: 0 210px;
}
.box .box-content {
height: 100%;
float: left;
background-color: blue;
}
.box .box-left {
width: 200px;
position: relative;
height: 300px;
float: left;
left: -210px;
margin-left: -100%;
background-color: green;
}
.box .box-right {
width: 200px;
position: relative;
min-height: 100%;
float: left;
margin-left: -200px;
right: -210px;
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水
水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
</html>
4.是用flex实现三列布局，左右固定中间自适应，父元素设置display: flex, 左右分别设置flex: 0 0 200px ，父元素为display:flex
那么子元素的float、clear和vertical-align属性将失效，兼容性有问题，一般都用于移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: flex;
}
.box .box-content {
flex: 0 1 auto;
margin: 0 10px;
background-color: blue;
}
.box .box-left {
flex: 0 0 200px;
background-color: green;
}
.box .box-right {
flex: 0 0 200px;
background-color: pink;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-content">
解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝
几个垃圾解斯大林经过拉丝几个垃圾解斯大林经
过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
</html>
5. 使用grid 布局实现三列布局，也是特别简单，设置父元素为，单行，三列，第一列左边宽度，中间自适应，
右边自适应，当然grid兼容性很大问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: 200px auto 200px;
grid-template-rows: 1fr;
}
.box .box-content {
background-color: blue;
}
.box .box-left {
flex: 0 0 200px;
background-color: green;
}
.box .box-right {
flex: 0 0 200px;
background-color: pink;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-content">
解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer> </footer>
</body>
</html>
三列布局总结
1.不使用浮动的圣杯布局，左中右都设置浮动，中间设置宽度100%，嵌套一层div 使其自元素的内容区
恰好自适应大小，左边右边设置margin-left:-100% 和margin:-右边宽度，
如果不想使用中间嵌套div,则可以设置中间的盒子模型为ie下的盒子模型，然后设置padding的值
中间模块一定要放最前面
2. 使用定位，中间设置margin-left 左边宽度，右边设置margin-right 右边宽度，父元素设置定位
position:relative; 左右两边设置position:absolute，绝对定位，设置 top 0 left 0 ,top 0 right 0
3. 使用定位，中间一样，左右两边设置相对定位，则要设置父元素padding 或者margin 左右宽度
然后和1一样设置，左边右边设置margin-left:-100% 和margin:-右边宽度， 左边再加上left:-宽度
右边设置right:-右边宽度，这个就是经典的双飞翼布局
4.使用弹性盒子布局，记住中间的一定要设置flex: 0 1 auto ，缩小倍数一定要是1，不是1的话盒子会
被子元素字体撑开，一般使用于移动端
5.使用grid,目前应该有很大兼容性问题，了解就行
css常见的各种布局下----三列布局的更多相关文章
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
随机推荐
- Executor, ExecutorService 和 Executors 间的区别与联系
UML简要类图关系: 下面详细看一下三者的区别: Executor vs ExecutorService vs Executors 正如上面所说,这三者均是 Executor 框架中的一部分.Java ...
- [Mysql]——通过例子理解事务的4种隔离级别(转)
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 一.事务隔离级别分类 第1级别:R ...
- C语言检查ip是否合法
在工作当中我们经常会遇到这种问题:判断一个输入的字符串是否为合法的IP地址,下面是一个测试小程序: #include <stdio.h> #include <string.h> ...
- maven使用与技巧
1.Pom文件介绍与基本组成 说明:全称是Project Object Model,通俗点的话说就是要对构建的项目进行建模. 组成的基本元素: 元素 描述 modelVersion 超级pom版本 g ...
- Linux时间子系统之（十六）：clockevent
专题文档汇总目录 Notes:介绍struct clocke_event_device及其功能feature.模式:触发event接口clockevents_program_event:clockev ...
- 嘿嘿嘿，开始自学mysql
开始学习mysql了,作为非计算机专业学生,必须需要一个地方来给自己的知识进行一些记录和总结. 一SQL语句 数据库是不认识java语言的,但是我们同样要与数据库交互,这时需要使用到数据库认识的语言S ...
- 简书markdown教程
1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...
- 集合-Table
当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava提供了一个新 ...
- bzoj5248 [2018多省省队联测]一双木棋
直接hash+爆搜即可. #include <cstdio> #include <cstring> #include <iostream> #include < ...
- BZOJ_4530_[Bjoi2014]大融合_LCT
BZOJ_4530_[Bjoi2014]大融合_LCT Description 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个 ...