ヒント：
CSS「>」です。
CSS3一意セレクタ、A> B Aは、すべての子要素Bを選択した要素を表します。
その差AB、ABは、すべての子孫要素を選択し、A> Bは、世代を選択します。
.A、.B {コンマが同じCSSスタイルを参照する}; .B {スペースの子孫要素}; A> .B {}は、子孫の要素の数よりも大きいです。
浮動ソリューション
コード：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0;
パディング：0;
}
.container> DIV {
分の高さ：100pxに。
}
.LEFT {
フロート：左;
幅：300ピクセル;
背景：blueviolet。
}
。
右{ フロート：右。
幅：300ピクセル;
背景：RGB（224、115、179）。
}
.Center {
背景：RGB（14、241、241）;
}
</スタイル>
</ head>
<body>
<DIV CLASS = "コンテナ">
<！ -この方法は、左右の列として知られて固定されて300ピクセル中間それが残っている適応、右、中央、
それが残っている場合、中央、右、そして1は右に落ちる- >
<divのクラス=「左」> </ div>
<divのクラス= "右">右</ DIV>の
センター「> <DIV CLASS ="
<H2>浮動ソリューション</ H2>
<H2> 3列レイアウト、周りに300ピクセルによって、適応中間</ H2>
</ DIV>
</ DIV >
</ BODY>
</ HTML>
第二に、絶対位置決めソリューション
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container>div {
min-height: 100px;
position: absolute;
}
.left {
left: 0;
width: 300px;
background: blueviolet;
}
.center {
left: 300px;
right: 300px;
background: rgb(14, 241, 241);
}
.right {
right: 0;
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
三、flex解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器设置为flex布局 */
.container {
display: flex;
min-height: 100px;
}
.left {
width: 300px;
background: blueviolet;
}
/*中间自适应的原理，让flex=1*/
.center {
flex: 1;
background: rgb(14, 241, 241);
}
.right {
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>flex布局方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
四、表格布局解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器设置为table布局 */
.container {
display: table;
min-height: 100px;
width: 100%;
}
.container>div {
display: table-cell;
}
.left {
width: 300px;
background: blueviolet;
}
.center {
background: rgb(14, 241, 241);
}
.right {
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
五、网格布局解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器声明为网格布局 网格有行有列
这里设置行高为100px，设为3列，左右侧300px，中间自适应
*/
.container {
display: grid;
min-height: 100px;
width: 100%;
grid-template-columns: 300px auto 300px;
}
.left {
background: blueviolet;
}
.center {
background: rgb(14, 241, 241);
}
.right {
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
