CSS各种布局

最新推荐文章于 2019-08-07 19:49:35 发布
最新推荐文章于 2019-08-07 19:49:35 发布
阅读量124 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaaaa123456aaaaq/article/details/86580826
版权

面：请用至少三种方式实现三栏布局.
我：好.

方式一：float方式

<html>
<head>
	<meta charset="UTF-8">
	<title>左右固定，中间自适应</title>
	<style>
		.txtCenter{
			text-align: center;
			line-height: 200px;
			font-size:20px;
			color:#fff;
		}
		.parentDiv{
			height:200px;
		}
		.leftDiv{
			float:left;
			width:200px;
			height:200px;
			background-color: #5A6A94;
		}
		.rightDiv{
			float:right;
			width:200px;
			height:200px;
			background-color: #EA6F5A;
		}
		.centerDiv{
			height:200px;
			margin-left:210px;
			margin-right:210px;
			background-color: #FFD5B1;
		}
	</style>
</head>
<body>
	<div class="parentDiv">
		<div class="leftDiv txtCenter">Left</div>
		<div class="rightDiv txtCenter">Right</div>
		<div class="centerDiv txtCenter">Center</div>
	</div>
</body>
</html>

方式二：圣杯布局

<html>
<head>
	<meta charset="UTF-8">
	<title>左右固定，中间自适应</title>
	<style>
		.txtCenter{
			text-align: center;
			line-height: 200px;
			font-size:20px;
			color:#fff;
		}
		.parentDiv{
			padding-left:210px;
			padding-right:210px;
			height:200px;
		}
		.leftDiv{
			float: left;
			margin-left:-100%;
			position: relative;
			left:-210px;
			width:200px;
			height:200px;
			background-color: #5A6A94;
		}
		.rightDiv{
			float: left;
			margin-left:-200px;
			position: relative;
			right:-210px;
		    width: 200px;
		    height: 200px;
			background-color: #EA6F5A;
		}
		.centerDiv{
			float:left;
			width:100%;
			height:200px;
			background-color: #FFD5B1;
		}
	</style>
</head>
<body>
	<div class="parentDiv">
		<div class="centerDiv txtCenter">Center</div>
		<div class="leftDiv txtCenter">Left</div>
		<div class="rightDiv txtCenter">Right</div>
	</div>
</body>
</html>

方式三：flex方式

<html>
<head>
	<meta charset="UTF-8">
	<title>左右固定，中间自适应</title>
	<style>
		.txtCenter{
			text-align: center;
			line-height: 200px;
			font-size:20px;
			color:#fff;
		}
		.parentDiv{
			display: flex;
            flex-direction: row;
		}
		.leftDiv{
			width:200px;
			height: 200px;
            order: -1;
            margin-right: 10px;
            flex: 0 1 200px;
			background-color: #5A6A94;
		}
		.rightDiv{
			height: 200px;
            margin-left: 10px;
            flex: 0 1 200px;
			background-color: #EA6F5A;
		}
		.centerDiv{
			height: 200px;
            background-color: #FFD5B1;
            flex-grow: 1;
		}
	</style>
</head>
<body>
	<div class="parentDiv">
		<div class="centerDiv txtCenter">Center</div>
		<div class="leftDiv txtCenter">Left</div>
		<div class="rightDiv txtCenter">Right</div>
	</div>
</body>
</html>

面：你还能想到其它的实现方式吗？
我：是的.
面：请口述一下.
我：双飞翼布局,绝对定位布局.
面：能说下圣杯布局和双飞翼布局的区别吗？
我：中间主体内容的处理方式不同.
面：怎么不同？
我：额 我还是写一下吧
面：可以.

方式四：双飞翼布局

<html>
<head>
	<meta charset="UTF-8">
	<title>左右固定，中间自适应</title>
	<style>
		.txtCenter{
			text-align: center;
			line-height: 200px;
			font-size:20px;
			color:#fff;
		}
		.parentDiv{
			float: left;
        	width: 100%;
		}
		.leftDiv{
			float: left;
        	margin-left: -100%;
			width:200px;
			height: 200px;
			background-color: #5A6A94;
		}
		.rightDiv{
			width: 200px;
			height: 200px;
	        float: left;
	        margin-left: -200px;
			background-color: #EA6F5A;
		}
		.centerDiv{
	        margin-left: 210px;
	        margin-right: 210px;
			height: 200px;
            background-color: #FFD5B1;
		}
	</style>
</head>
<body>
	<div style="overflow:hidden;">
		<div class="parentDiv">
			<div class="centerDiv txtCenter">Center</div>
		</div>
		<div class="leftDiv txtCenter">Left</div>
		<div class="rightDiv txtCenter">Right</div>
	</div>
</body>
</html>

面：你怎么在外层写了一个Div并且写了overflow了呢？
我：为了不影响其它因素.
面：写清除浮动不行吗！为什么要这样写？
我：额 也可以的,我自己喜欢这么干，自己设置了float,影响了别人,还要让别人擦屁股？.
面：额 我们继续下一题.
我：好.

DeftWar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
css左右两栏、左中右三栏布局
林中明月间丶
09-06 4664
左右两栏： &lt;style type="text/css"&gt; .wrap{ margin: 0 auto; width: 1200px; } #left{/*左边宽度固定*/ width: 200px; height: 500px; background: pink; float: left; } #right{ height: 500px; ...
css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块
且听风吟的博客
08-07 4390
css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块
实现左右两边固定宽度，中间自适应的布局
weixin_38667820的博客
02-26 2437
废话不多说，上代码~ 方法一：float解决方案 &lt;section class="layout float"&gt; &lt;style&gt; .layout.float { width: 100%; height: 100px; } .layout.float .floatleft-center-right&gt;div { ...
css三列布局--两边固定中间自适应和中间固定两边自适应
热门推荐
DOM曼珠沙华的博客
03-25 2万+
三列布局    本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。布局方式一:两边固定中间自适应1.flex布局    思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）&lt;!DOCTYPE html&gt; &lt;html&gt; ...
左右宽度固定中间内容自适应html布局的三种方法
weixin_43316655的博客
05-16 2191
牛客网的一道面试题，要求左右宽度固定中间自适应，如下图的布局方式 一、弹性布局 父元素display：flex子元素会全部并列在一排。 子元素中flex:n的宽度会将父元素的宽度/n 如flex:1，宽度就等于父元素宽度。 *{ margin: 0; padding: 0; text-align: center; font-size: 25px; color: white; line-heigh...
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版...
css网站布局实录-2
12-15
第二版书籍，一些布局，盒模型，圆角实现，一些兼容性
CSS自适应布局思路
12-09
最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。...css中的整体布局 CSS Code复制内容到剪贴板 @media screen and (min-width: 0px) {公共css
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
有关全屏布局，三栏中间自适应
tangdonnaui的专栏
03-30 107
先看实例，稍后整理。   关键的一点我也提到有关高度等的层。有关这个问题的解决办法就是在每一个要等高的层上面加一个margin-bottom:-32767px;padding-bottom:32767px;这要利用padding与margin互补的情况下让两个层相等对齐。...
CSS三列布局之左右宽度固定，中间元素自适应问题
qq_31965515的博客
04-08 2152
最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。 首先我想到的是float——浮动布局 使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。 <!DOCTYPE html>...
假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
雷欧奥特曼的博客
09-20 1247
解决方案： &lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test1&lt;/title&gt; &lt;style media="
HTML+CSS+JS+JQ+Bootstrap的工业焊接工程服务响应式网页.7z
06-28
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建了信息的框架；CSS则赋予网页生动的外观，让设计创意跃然屏上；JavaScript的加入，使网站拥有了灵动的交互体验；jQuery，作为JavaScript的强力辅助，简化了DOM操作与事件处理，让编码更为高效；而Bootstrap的融入，则确保了网站在不同设备上的完美呈现，响应式设计让访问无界限。 通过这份源码，你将： 学习如何高效组织HTML结构，提升页面加载速度与SEO友好度； 掌握CSS高级技巧，如Flexbox与Grid布局，打造适应各种屏幕的视觉盛宴； 理解JavaScript核心概念，动手实现动画、表单验证等动态效果； 利用jQuery插件快速增强用户体验，实现滑动效果、Ajax请求等； 深入Bootstrap框架，掌握移动优先的开发策略，响应式设计信手拈来。 无论是前端开发新手渴望系统学习，还是资深开发者寻求灵感与实用技巧，这份资源都是不可多得的宝藏。立即深入了解，开启你的全栈前端探索之旅，让每一个网页都成为技术与艺术的完美融合！
记录一个Mapper坑
06-28
记录一个Mapper坑
260ssm_mysql_jsp 志愿者服务平台.zip（可运行源码+sql文件+文档）
06-28
本系统的设计，主要是通过Java语言数据库方面采用MYSQL数据库，采用B/S的设计模式来进行设计开发的。本系统的设计主要是针对此次毕业设计而进行的，只要一台电脑就可以进行开发。其语言的选择和数据库的选择都使用开源且免费的。所以说所开发出来的系统也都是经济可用的。 设计并实现一款基于SSM的志愿者服务平台系统主要其系统包括不同的端组成，前端主要包括系统用户管理、新闻数据管理、变幻图管理、志愿者管理、培训视频管理、志愿者项目管理、服务时长管理、交流分享管理、志愿者表彰管理。前台主要包括网站首页、培训视频、志愿者项目、交流分享、志愿者表彰、新闻信息等。 关键词：Java语言，MySQL数据库，B/S设计模式
基于HTML+CSS+JS开发的网站-运动电商网店响应式网页.7z
06-28
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建了信息的框架；CSS则赋予网页生动的外观，让设计创意跃然屏上；JavaScript的加入，使网站拥有了灵动的交互体验；jQuery，作为JavaScript的强力辅助，简化了DOM操作与事件处理，让编码更为高效；而Bootstrap的融入，则确保了网站在不同设备上的完美呈现，响应式设计让访问无界限。 通过这份源码，你将： 学习如何高效组织HTML结构，提升页面加载速度与SEO友好度； 掌握CSS高级技巧，如Flexbox与Grid布局，打造适应各种屏幕的视觉盛宴； 理解JavaScript核心概念，动手实现动画、表单验证等动态效果； 利用jQuery插件快速增强用户体验，实现滑动效果、Ajax请求等； 深入Bootstrap框架，掌握移动优先的开发策略，响应式设计信手拈来。 无论是前端开发新手渴望系统学习，还是资深开发者寻求灵感与实用技巧，这份资源都是不可多得的宝藏。立即深入了解，开启你的全栈前端探索之旅，让每一个网页都成为技术与艺术的完美融合！
288ssm_mysql_jsp 房屋租赁系统.zip（可运行源码+sql文件+文档）
最新发布
06-28
本次是基于SSM框架技术来对于租房行业进行深入了解，通过对租房行业的现状，未来发展以及现再存在的问题等进行分析，总结出本次开发程序的必要性，通过搭建一款房屋租赁系统来实现房产新闻的在线推广，房东、租户的在线注册以及在线预约开放、交流等功能，为租户与房东通过线上来搭建一个快速交流的平台，实现很好的线上化撮合平台的作用。本次的系统开发使用了SSM框架以及JSP为主开发工具，通过eclipse开发软件工具来进行整体的内容开发。数据库选择以MySQL作为本次的数据库管理工具。通过本次的系统开发最终实现了需求满足，运行稳定。 在本次的系统功能性的分析上，首先需要保证三个角色都能够正常的实现正常的角色配置，租客与房东都可以实现在线的注册功能，租客、房东以及管理员都能够实现在线登录的功能。而在租客的角色中需要对租客进行需求进行信息化的进程表达，要满足租客在线查看房源信息、在线预约看房以及在线租房、退房等功能，可以满足租客在租房过程中的全部需求。对于房东而言，需要满足房东在线刊登个人房屋出租的信息，能够对个人出租的房屋进行 关键词：SSM框架；JSP；MySQL；房屋租赁
Hemisphere参考手册
06-28
Hemisphere参考手册
CSS Grid 布局
08-30
CSS Grid 布局是一种强大的网页布局方式，它提供了一种二维网格系统，使得可以更灵活地定位和排列网页元素。使用CSS Grid，可以将网页分割成行和列，并通过指定网格单元格来放置元素。 要开始使用CSS Grid布局，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值