CSS / 實現三列DIV等高佈局

 

  • #wrap
  • {
  • overflow: hidden;
  • width: 1000px;
  • margin: 0 auto;
  • }
  • #left
  • {
  • float: left;
  • width: 250px;
  • background: #00FFFF;
  • margin-bottom: -10000px;
  • padding-bottom: 10000px;
  • }
  • #center
  • {
  • float: left;
  • width: 500px;
  • background: #dadada;
  • margin-bottom: -10000px;
  • padding-bottom: 10000px;
  • }
  • #right
  • {
  • float: right;
  • width: 250px;
  • background: #00FFFF;
  • margin-bottom: -10000px;
  • padding-bottom: 10000px;
  • }

    • 使用正padding和負margin實現多列佈局方法

  • CSS Code
  • #wrap{overflow: hidden;width: 1000px;margin: 0 auto;}←最外層DIV
    #left, #center, #right{margin-bottom: -10000px;padding-bottom: 10000px;}
    ←    內三區塊共用
    #left{float: left;width: 25%;background: #00FFFF;}←左側
    #center{float: left;width: 50%;background: #FF0000;}←中間
    #right{float: right;width: 25%;background: #00FF00;}←右側
    • 文章標籤
    全站熱搜
    創作者介紹
    創作者 jun431869 的頭像
    jun431869

    二流設計師的小筆記

    jun431869 發表在 痞客邦 留言(0) 人氣(732)