作者 主題: css 排版 (定位) 的問題  (閱讀 5118 次)

0 會員 與 1 訪客 正在閱讀本文。

casa

  • 懷疑的國中生
  • **
  • 文章數: 41
    • 檢視個人資料
css 排版 (定位) 的問題
« 於: 2013-04-18 12:06 »
各位學長,不好意思...
最近小的在研究 css
可是,要兜一個頁面,真的不容易,怎麼弄都不像自己想要的... 用 table 來架構好像簡單多了...
又加上 IE/ Firefox 顯示不同,真的快昏了...
這邊想請問一下,底下這個頁面,不知道為什麼沒辦法 有上下二排,上排分三個 div 塊,顏色分別是 red yellow green
下排也三塊,顏色 blue purple cyan
這六塊的位置應該像
▇ ▇ ▇
▇ ▇ ▇
可是...
用IE9看起來有分上下二排,也各有三塊,但是位置不對稱
用 Firefox 就很怪了,沒有從頭顯示...
不知道是哪邊出了問題呢? 還請指導一下... 謝謝!

代碼: [選擇]
<html>
<head>
  <title></title>
<style>
  #div1 {
    margin-top: 0px;
  }
  #div2 {
    margin-top: 200px;
  }
  #aaa {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
  }
  #bbb {
    margin-left: 200px;
    float: left;
    width: 200px;
    height: 200px;
    background: yellow;
  }
  #ccc {
    float: right;
    width: 200px;
    height: 200px;
    background: green;
  }
  #ddd {
    float: left;
    width: 200px;
    height: 200px;
    background: blue;
  }
  #eee {
    margin-left: 200px;
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
  }
  #fff {
    float: right;
    width: 200px;
    height: 200px;
    background: cyan;
  }
</style>
</head>
<body>
<div>
  <div id="div1">
    <div id="aaa"></div>
    <div id="bbb"></div>
    <div id="ccc"></div>
  </div>
  <div id="div2">
    <div id="ddd"></div>
    <div id="eee"></div>
    <div id="fff"></div>
  </div>
</div>
</body>
</html>

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
Re: css 排版 (定位) 的問題
« 回覆 #1 於: 2013-04-18 13:50 »
如果用 firefox 或 google chromium 開 DOM 檢視器看一下就能知道原因
3個小方塊實際上並沒有真的放在 div1, div2 裡面
給兩個容器指定大小應該能改善這問題

日落

  • SA 苦力組
  • 憂鬱的高中生
  • ***
  • 文章數: 96
    • 檢視個人資料
    • http://zeroplex.blogspot.com/
Re: css 排版 (定位) 的問題
« 回覆 #2 於: 2013-04-18 13:57 »
同一行的 div 屬性都用 float: left 即可
後面的 div 會把原本 float 的 div 往右邊擠

// 我把 margin 拿掉了
代碼: [選擇]
<style>
  #div1 {
  }
  #div2 {
  }
  #aaa {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
  }
  #bbb {
    float: left;
    width: 200px;
    height: 200px;
    background: yellow;
  }
  #ccc {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
  }
  #ddd {
    float: left;
    width: 200px;
    height: 200px;
    background: blue;
  }
  #eee {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
  }
  #fff {
    float: left;
    width: 200px;
    height: 200px;
    background: cyan;
  }
</style>


另外
第一排 div 安置好後
需要加入 clear 屬性
後面的 div float 才會重新定位

代碼: [選擇]
<div>
  <div id="div1">
    <div id="aaa"></div>
    <div id="bbb"></div>
    <div id="ccc"></div>
  </div>
  <div style="clear: both;"></div>
  <div id="div2">
    <div id="ddd"></div>
    <div id="eee"></div>
    <div id="fff"></div>
  </div>
  <div style="clear both;"></div>
</div>
</body>

casa

  • 懷疑的國中生
  • **
  • 文章數: 41
    • 檢視個人資料
Re: css 排版 (定位) 的問題
« 回覆 #3 於: 2013-04-18 14:50 »
謝謝樓上二位的幫忙
我都不知道要打開 檢視器 來仔細對一下... 這個功能真是太棒了...
而且,用 clear 後的結果就很不錯呢...
學到不少,謝謝!!