模仿他人写的三列布局, 在脑海里有了多种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: