利用CSS的三列等高布局
生活随笔
收集整理的這篇文章主要介紹了
利用CSS的三列等高布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以前自己都是用JS去處理，原來用CSS也是很方便的，可以少寫代碼^_^
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>三列等高布局</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial;}
#Header,#Footer{margin:0 auto; height:100px; width:800px; background:Red; color:#FFF;} /*關部和尾部樣式*/
#Container{width:800px; margin:10px auto; height:1%; overflow:hidden;}/*overflow:hidden可以用來清除浮動，而此處再加上height:1%也是為了解決IE6下光用overflow不能清除浮動的原因*/
#Container div{float:left; display:inline; width:258px; border:1px solid #F60;
background:url(border_bottom.png) repeat-x left 300px #CCC; color:Blue; padding-bottom:9999px;
margin-bottom:-9999px;}/* 左浮動以后再用 display:inline是為了消除IE6的雙邊距Bug */
#Container div.center{margin-left:10px; margin-right:10px; height:300px;}
#Container div.left{height:300px;}
</style>
</head>
<body>
<div id="Header">我是頭部</div>
<div id="Container">
<div class="left">清除浮動可以用 overflow:hidden 或 overflow:auto，<br />在比較標準的瀏覽器里沒有問題，<br />但 IE6 沒有效果，為了兼容 IE6 ，<br />可以為父元素：<br />
1、設置一個合適的寬度，<br />但“合適的寬度”有的時候不好掌握；<br />
2、加上 height:1% ，什么都不用管，加上就有效，我還沒有發現缺點；<br />
3、加上 zoom:1 ，不能通過W3C驗證。</div>
<div class="center">
此處的三列等高布局是利用了CSS的特性，先給容器加上一個很大的padding-bottom再用 margin-bottom負值補回來，而外層（#Container）用overflow:hidden將不顯示區域隱藏起來，
因為這些Div我都設了1px的邊框，此時你會發現，他們下部的邊框沒有了，因此還得再做一張1px的圖片，作為這些div的背景顯示在底部。
</div>
<div class="right">右邊</div>
</div>
<div id="Footer">我是底部</div>
</body>
</html>
運行效果：
轉載于:https://www.cnblogs.com/jancyxue/archive/2011/12/29/2306820.html
總結
以上是生活随笔為你收集整理的利用CSS的三列等高布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 饮料代理一年能挣多少(2元饮料招商)
- 下一篇： CSS 基本样式