css三列布局（中间固定和两侧固定）

模仿他人写的三列布局， 在脑海里有了多种css属性的印象。

一、两侧固定
middle块的word-wrap: break-word属性防止文字被覆盖。
html

		<div id="float">
			<div class="left"></div>
			<div class="right"></div>
			<div class="middle">12345678909876</div>
		</div>
		<br>
		<div id="flex">
			<div class="left"></div>
			<div class="middle">12345678909876</div>
			<div class="right"></div>
		</div>
		<br>
		<div id="position">
			<div class="left"></div>
			<div class="middle">12345678909876</div>
			<div class="right"></div>
		</div>
		<br>
		<div id="calc">
			<div class="left"></div>
			<div class="middle">12345678909876</div>
			<div class="right"></div>
		</div>
		<br style="clear: both;"/>
		<br>
		<div id="double-swing">
			<div class="middle">
				<div id="middle-content">
					12345678909876
				</div>
			</div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<br style="clear: both;"/>
		<br>
		<div id="grail">
			<div class="middle">12345678909876</div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<br style="clear: both;"/>
		<br>
		<div id="grid">
			<div class="left"></div>
			<div class="middle">12345678909876</div>
			<div class="right"></div>
		</div>
		<br>
		<div id="table">
			<div class="left"></div>
			<div class="middle">12345678909876</div>
			<div class="right"></div>
		</div>

css

body {
   
	min-width: 300px;
}

.left,
.right {
   
	width: 100px;
	height: 100px;
}

.left {
   
	background: #f00;
}

.middle {
   
	background: #0f0;
	height: 100px;
	word-wrap: break-word;
}

.right {
   
	background: