作者 主題: 如何用DIV來打直排版(list data) (找了很久了)  (閱讀 7474 次)

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

唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料
如果想用div來list data, 就可以用一個container ,內面的box用   float: left; 就可以橫版, 但如果想直排, 可以做到嗎?   也就到打直到了一定的高度 , 就會向右開一行新的排列,    謝謝

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
如何用DIV來打直排版(list data) (找了很久了)
« 回覆 #1 於: 2007-06-02 18:10 »
float 好像沒得設成 vertical 型態  :roll:

如果 server 端有使用 script (PHP, ASP, JSP...),

可以配合使用來達到目的..

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
如何用DIV來打直排版(list data) (找了很久了)
« 回覆 #2 於: 2007-06-02 18:23 »
剛剛想了一下,

其實不一定要 server 端 script 配合,

直接用 javascript 也可以作到啦..


唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
Re: google
« 回覆 #5 於: 2007-06-04 00:43 »
引述: "唔知"
引述: "hikohan"
http://www.google.com.tw/search?complete=1&hl=zh-TW&q=div+css+%E6%96%87%E5%AD%97+%E7%9B%B4%E6%8E%92&meta=

ex:
http://dob.tnc.edu.tw/themes/old/showPage.php?s=1824&t=2

對不起 ^^ 我不是指這個呢 ..



下午無聊有試了一下,

是可以做垂直排列, 不過有兩個問題,

1. IE only,  firefox 並未支援.

2. 會變成由右至左, 由上而下排列, 或許可以配合其他屬性設定由左至右吧..

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
不是這個是哪個?
« 回覆 #6 於: 2007-06-04 00:51 »
css控制文字輸出呈垂直排列,設定寬高就換行。

這就是用div打直排版,不是嗎?
lifeIsFunWithPHP.

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
如何用DIV來打直排版(list data) (找了很久了)
« 回覆 #7 於: 2007-06-04 08:51 »
樓主要的應該是這樣的吧..

代碼: [選擇]
<html><body>
<style>
div {writing-mode: tb-rl; float: left; margin: 3px; direction: ltr;}
.subDiv {writing-mode: lr-tb; float: left; padding: 2px; background: #a0a0ff; width: 120px;}
</style>

<div style="width: 500px; height: 230px; background: #e0e0e0;">
 <div class="subDiv">01-1234567890</div>
 <div class="subDiv">02-12345690</div>
 <div class="subDiv">03-1234560</div>
 <div class="subDiv">04-123456890</div>
 <div class="subDiv">05-12345690</div>
 <div class="subDiv">06-123456890</div>
 <div class="subDiv">07-1234567890</div>
 <div class="subDiv">08-12345690</div>
 <div class="subDiv">09-1234560</div>
 <div class="subDiv">10-123456890</div>
 <div class="subDiv">11-12345690</div>
 <div class="subDiv">12-123456890</div>
 <div class="subDiv">13-1234567890</div>
 <div class="subDiv">14-12345690</div>
 <div class="subDiv">15-1234560</div>
 <div class="subDiv">16-123456890</div>
 <div class="subDiv">17-12345690</div>
 <div class="subDiv">18-123456890</div>
 <div class="subDiv">19-1234567890</div>
 <div class="subDiv">20-12345690</div>
 <div class="subDiv">1234560</div>
 <div class="subDiv">123456890</div>
 <div class="subDiv">1234567890</div>
 <div class="subDiv">12345690</div>
 <div class="subDiv">1234560</div>
 <div class="subDiv">123456890</div>
 <div class="subDiv">12345690</div>
 <div class="subDiv">123456890</div>
</div>
</body></html>


不過, 上面的碼 IE omly & 只能由右向左排,

wriing-mode 沒有 tb-lr 的設定..

hikohan

  • 俺是博士!
  • *****
  • 文章數: 1288
    • 檢視個人資料
是這樣嗎?
« 回覆 #8 於: 2007-06-04 12:19 »
http://60.248.148.142/tmp/vtext.htm

與第一次回應答案同。
lifeIsFunWithPHP.

唔知

  • 憂鬱的高中生
  • ***
  • 文章數: 103
    • 檢視個人資料
如何用DIV來打直排版(list data) (找了很久了)
« 回覆 #9 於: 2007-06-09 00:06 »
謝謝大家 已經解決了,   再想問一下 下面是一個div ,
[我是小明], 比方說 這個div的長度是 100, 請問有方法可以令 這個div是50是只show [我是] 嗎?  謝謝

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
如何用DIV來打直排版(list data) (找了很久了)
« 回覆 #10 於: 2007-06-09 00:33 »
引述: "唔知"
謝謝大家 已經解決了,   再想問一下 下面是一個div ,
[我是小明], 比方說 這個div的長度是 100, 請問有方法可以令 這個div是50是只show [我是] 嗎?  謝謝



記得之前有討論過..

用 overflow 在 網頁設計 區搜尋一下看看..