作者 主題: DIV 排版問題~"~  (閱讀 8431 次)

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

唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料
DIV 排版問題~"~
« 於: 2007-01-01 05:40 »
我想用 div 的格做成一個類似table的表格 就是:

代碼: [選擇]

口口口口口
口口口口口
口口口口口

似的, 因為一些原因,  一定要用position:relative,

但我做成的排版卻變成
代碼: [選擇]


  口
     口
       口

  口
     口
       口

  口
     口
       口

請問我應該如何做呢


代碼: [選擇]

<div id="photo_387" style="position:relative;left:100px;top:150px;width:130px;height:170px;background:red;"></div>

<div id="photo_388" style="position:relative;left:260px;top:150px;width:130px;height:170px;background:red;"></div>

<div id="photo_389"
style="position:relative;left:420px;top:150px;width:130px;height:170px;background:red;"></div>

<div id="photo_390"
style="position:relative;left:580px;top:150px;width:130px;height:170px;background:red;"></div>

<div id="photo_391"
style="position:relative;left:100px;top:350px;width:130px;height:170px;background:red;"></div>

<div id="photo_392"
style="position:relative;left:260px;top:350px;width:130px;height:170px;background:red;"></div>

<div id="photo_393"
style="position:relative;left:420px;top:350px;width:130px;height:170px;background:red;"></div>

<div id="photo_394"
style="position:relative;left:580px;top:350px;width:130px;height:170px;background:red;"></div>

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
DIV 排版問題~"~
« 回覆 #1 於: 2007-01-01 09:44 »
首先, 必須指定顯示的範圍, 瀏覽器會自動幫你排版,

限定寬度可以告訴瀏覽器到哪裏就該換行..


再來, 要告訴瀏覽器排版的方式, 例如 float: left

margin 是設定每個<div>間的間隔..

代碼: [選擇]
<style>
div {float:left;margin: 5px 5px 5px 5px;}
</style>
<div style="width:600px">
<div id="photo_387" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_388" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_389" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_390" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_391" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_392" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_393" style="position:relative;width:130px;height:170px;background:red;"></div>

<div id="photo_394" style="position:relative;width:130px;height:170px;background:red;"></div>
</div>

唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料
DIV 排版問題~"~
« 回覆 #2 於: 2007-01-01 15:00 »
感謝大大, 又成功了^^
但有召一個問題想問,



<script>
var aElts = ['apple','pear','orange'];
</script>

請問要如何才可以查到 pear是在array內的位置呢?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
DIV 排版問題~"~
« 回覆 #3 於: 2007-01-01 17:38 »
查位置就用 indexOf() 嘍~  :wink:

唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料
DIV 排版問題~"~
« 回覆 #4 於: 2007-01-02 03:03 »
引述: "yamaka"
查位置就用 indexOf() 嘍~  :wink:

感謝^^