HTML+CSS的两栏、三栏布局以及垂直居中的实现方式

1.两栏布局(左固定,右适应)

先写出初始样式和结构。

<div class="container">
    <div class="left">Lorem ipsum dolor sit amet</div>
    <div class="right">Lorem ipsum dolor sit amet</div>
</div>
div {
    height: 200px;
    color: #fff;
}
css代码
  • float+margin实现方式
.left {
	float: left;
	width: 300px;
	background-color: #5616;
}
.right {
	width: 100%;
	margin-left: 300px;
	background-color: #438;
}
  • flex
.container {
    display: flex;
}
.left {
    flex:  0 0 300px;
    background-color: #5616;
}
.right {
    flex:  1 1;
    background-color: #438;
}

右固定,左适应同理。

2.三栏布局

  • float + margin方式
<div class="container">
	<div class="left">Lorem ipsum dolor sit amet</div>
	<div class="right">Lorem ipsum dolor sit amet</div>
	<div class="main">Lorem ipsum dolor sit amet</div>
</div>
div {
	height: 200px;
	color: #fff;
}
.main {
	width: 100%;
	margin-left: 300px;
	margin-right: 100px;
	background-color: #554;
}
.left {
	float: left;
	width: 300px;
	background-color: #5616;
}
.right {
	float: right;
	width: 100px;
	background-color: #438;
}
  • grid实现方式
.container {
	display: grid;
	grid-template-columns: 300px auto 100px;	//列的宽度
}
.main {
	grid-row: 1;	//第几行
	background-color: #554;
}
.left {
	grid-row: 1;	//第几行
	background-color: #5616;
}
.right {
	grid-row: 1; 	//第几行
	background-color: #438;
}
  • 圣杯布局
.container {
	padding: 0 100px 0 300px;
	overflow: hidden;
}
.main {
	float: left;
	width: 100%;
	background-color: #554;
}
.left {
	position: relative;
	float: left;
	width: 300px;
	left: -300px;
	margin-left: -100%;
	background-color: #5616;
}
.right {
	position: relative;
	float: left;
	right: -100px;
	margin-left: -100px;
	width: 100px;
	background-color: #438;
}
  • 双飞翼布局
<div class="container">
	<div class="wrap">
		<div class="main">Lorem ipsum dolor sit amet</div>
	</div>
	<div class="left">Lorem ipsum dolor sit amet</div>
	<div class="right">Lorem ipsum dolor sit amet</div>
</div>
div {
	height: 200px;
	color: #fff;
}
.wrap {
	float: left;
	width: 100%;
}
.main {
	margin: 0 100px 0 300px;
	overflow: hidden;
	background-color: #554;
}
.left {
	float: left;
	width: 300px;
	margin-left: -100%;
	background-color: #5616;
}
.right {
	float: left;
	width: 100px;
	margin-left: -100px;
	background-color: #438;
}

两种布局方式的不同之处在于如何处理中间主列的位置:

圣杯布局是利用父容器的左、右内边距+两个从列相对定位;
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
复制代码

3.垂直居中

  • position + margin实现(1)
<div class="container">
	<div class="content"></div>
</div>
.container {
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #5465;
}
.content {
	position: absolute;
	left: 50%;
	top:  50%;
	width: 200px;
	height: 200px;
	margin-left: -100px;
	margin-top: -100px;
	background-color: #6465;
}
  • position + margin实现(2)
.container {
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #5465;
}
.content {
	position: absolute;
	left: 0;
	top:  0;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	background-color: #6465;
}
  • position + transform实现
.container {
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #5465;
}
.content {
	position: absolute;
	left: 50%;
	top:  50%;
	width: 200px;
	height: 200px;
	transform: translate(-50%, -50%);
	background-color: #6465;
}
  • flex实现
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	height: 500px;
	background-color: #5465;
}
.content {
	width: 200px;
	height: 200px;
	background-color: #6465;
}
复制代码
  • inline-block实现
.container {
	display: inline-block;
	width: 500px;
	height: 500px;
	text-align: center;
	background-color: #5465;
}
.content {
	display: inline-block;
	width: 200px;
	height: 200px;
	vertical-align: middle;
	background-color: #6465;
}
.container::after{
	content: ‘‘;
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}
 
 

原文地址:https://www.cnblogs.com/webljp/p/10130532.html

时间: 2024-10-06 20:50:51

HTML+CSS的两栏、三栏布局以及垂直居中的实现方式的相关文章

两栏三栏自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body{width:100%;height:100%;overflow:hidden;} html{_height:auto;_padd

css两栏三栏布局

一.三栏布局 1. 经典的圣杯布局(双飞翼布局) <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub

html5 css练习,弹性三栏布局

*{    margin: 0;    padding: 0;} body,html{    width: 100%;    height: 100%;        font: bold 24px 隶书;} header,footer{    background: rgba(30,10,10,0.6);    padding: 15px;    text-align: center;    line-height: 2em;    color: #fff;} section{    back

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基础篇(三)——布局(上)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

中间固定 两边平分的 自适应三栏布局

NEC 和网上有很多关于两栏三栏布局的案例,而关于三栏布局大体为: 两边固定大小 中间自适应: 无意中一个朋友问我: 中间固定 两边平分的 自适应三栏布局 怎么实?! 当时第一时间想到的是用 display: flex; 然而这个属性不是全兼容的,目前市场上一些国产机的浏览器 实现不了想要的结果: 回去细想后觉得用position是个方法——不管怎样这是在布局中被我用坏了的属性,总能帮我解决很多问题! 以下是贴出的代码: <style> *{ padding: 0; margin: 0; }

CSS总结(七)——常见的两栏、三栏布局

一.两栏布局 — 左栏固定宽度,右栏宽度自适应 1. 左浮动+margin <div class=“left”></div> <div class=“main”></div> css:  .left{width:200px;float:left;} .main{margin-left:200px;} ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决 2.  绝对定位 + margin-left (兼容性好) &

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo