<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 宽度适配 */ html, body { width: 100%; overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */
}
/*1. pc端适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。 2.放大或者缩小屏幕，网页可以正常显示 */
/* 一、两列布局 */
/* 1.左定宽 右边自适应 或者 右边定宽左边自适应 */ .content{ width: 1200px; /* 主容器 */ min-width: 960px; margin: 0 auto; background: #fff;
} .left { float: left; width: 200px;/* 定宽 */ background: #ccc; height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
} .right { margin-left: 100px; background: #999; height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
}
</style>
</head>
<body>
<div class="content">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 宽度适配 */ html, body { width: 100%; overflow-x: hidden;
/* 外层盒子设置最小宽度的话看不到横向滚动条 */
}
/* 一、三列布局 */
/* 1.左右定宽中间自适应 */ .content { width: 1200px;
/* 主容器 */ min-width: 960px; margin: 0 auto; background: firebrick;/* 测试设了一个背景（为了更好看效果） */ display: table;
} .left { width: 100px;
/* 定宽 */ background: #ccc; height: 800px;
/* 测试设了一个高度和背景（为了更好看效果） */
} .right { width: 100px;
/* 定宽 */ background: fuchsia; height: 800px;
/* 测试设了一个高度和背景（为了更好看效果） */
} .left, .right, .center { display: table-cell;
}
</style>
</head>
<body>
<div class="content">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之双飞翼布局</title>
<style type="text/css"> .container { width: 1200px;
/* 主容器 */ min-width: 960px; margin: 0 auto; background: #ccc;
/* 测试设了一个背景（为了更好看效果） */
} .left, .center, .right { float: left; min-height: 400px;
/* 测试更好观看效果 统一高度*/ text-align: center;
} .left { margin-left: -100%; background: #0000FF; width: 200px;
/* 定宽 */
} .right { margin-left: -300px; background-color: #FF0000; width: 300px;
/* 定宽 */
} .center { background-color: #f2f1f1; width: 100%;
} .content { margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">中间自适应</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之圣杯布局</title>
<style type="text/css"> .container { width: 1200px;
/* 主容器 */ min-width: 960px; margin: 0 auto; background: #ccc;/* 测试设了一个背景（为了更好看效果） */ padding: 0 300px 0 200px;
} .left, .center, .right { position: relative; min-height: 200px; float: left;
} .left { left: -200px; margin-left: -100%; background: green;/* 测试设了一个背景（为了更好看效果） */ width: 200px;
} .right { right: -300px; margin-left: -300px; background: red;/* 测试设了一个背景（为了更好看效果） */ width: 300px;
} .center { background: blue;/* 测试设了一个背景（为了更好看效果） */ width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="tip_expand">双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局-Flex布局</title>
<style type="text/css"> .container { display: flex; width: 1200px;
/* 主容器 */ min-width: 960px; margin: 0 auto; background: #ccc;
/* 测试设了一个背景（为了更好看效果） */ min-height: 800px; font-size: 0; /* 间隙处理 */
} .main { flex-grow: 1; background-color: blue; font-size: 24px;
} .left { order: -1;/* 对于order属性：定义项目的排列顺序，越小越靠前，默认为0。 */ flex-basis: 200px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */ background-color: green; font-size: 24px;
} .right { flex-basis: 300px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */ background-color: red; font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
