作者
santin (被雷劈)
看板
Web_Design
標題
Re: [問題] css排版問題，表格超出div範圍?
時間
Tue Oct 13 03:57:41 2009
不好意思我不太會用 BBS
你的網頁在 Firefox 上看到的結果如下
http://farm4.static.flickr.com/3532/4005235309_8a9e38f196_o.png
因為我目前沒有 IE 可以看所以看不出問題在哪
不知道你想要的效果是不是像下圖這樣一直往下延伸區塊來顯示資料
╭——————————————————╮
│┌───────┐┌───────┐│
││ 第４棟測試 ││ 第三筆測試 ││
│└───────┘└───—───┘│
│┌───────┐┌───────┐│
││ 第二筆測試 ││ 第一筆測試 ││
│└───────┘└───────┘│
│┌───────┐┌───────┐│
││ 其他的資料 ││ 其他的資料 ││
│└───────┘└───────┘│
│ 第一頁 ▲ 上一頁 下一頁 ▼ 最後頁 │
╰──────────────────╯
如果是的話，以動最少的方式來修改
可以在 table 加個 class 讓 css 控制
（table的html語法我省略了，重點是在 class="自定名稱"）
----------------------------------------
<div class="style1">
<table class="grid">第4棟測試</table>
<table class="grid">第三筆測試</table>
<table class="grid">第二筆測試</table>
<table class="grid">第一筆浿試</table>
<div class="pagenav">第一頁........最後頁</div>
----------------------------------------
這樣就可以在 css 中讓他們一個個排列好
（上圖的最外框圓角矩形表示div.style1）
.style1 {
width: 760px;
.grid {
width: 368px;
height: 153px;
float: left;
margin: 10px;
.pagenav {
clear: both;
包在 table 外的 div 設個寬度可能會好點
原本裝資料的 table 設定 float:left;
為了防止下面資料被擠上來，所以接在後面的 pagenav（也是我自己加的class）
要加上 clear: both;
這應該是比較簡單的解決方式（麻煩一點就重寫了）
不過搞不好 style1 的 div 設寬度就解決了XD
我本身是做視覺設計的，所以這方面懂得不多
也請版上其他高手多多指教^^"
: <table width="368" height="153" border="0" align="left">
: <td width="198" rowspan="6" background="images/himg.jpg"><div align="center"><a href="house1.php?H_ID=<?php echo $row_Recordset1['H_ID']; ?>"><img src="images/house.jpg" width="180" height="135" border="0" /></a></div></td>
: <td width="160" height="21"><img src="images/arrow_330.gif" width="8" height="8" /><?php echo $row_Recordset1['H_Name']; ?></td>
: </tr>
: <td height="21"><img src="images/line.jpg" width="160" height="6" /></td>
: </tr>
: <td height="21">地區：<?php echo $row_Recordset1['Addr']; ?></td>
: </tr>
: <td height="21">價格：<?php echo $row_Recordset1['Price']; ?></td>
: </tr>
: <td height="33"> </td>
: </tr>
: <td height="21"> </td>
: </tr>
: </table>
: <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?><p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p> </p>
: <p align="center">第一頁 ▲ 上ㄧ頁
: <select name="page" id="page">
: </select>
: 下一頁 ▼ 最後頁 | 1 / 1</p>
: <p><br />
: <span class="style1"> </span></p>
: </div>
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.81.71
※ 編輯: santin 來自: 220.136.81.71 (10/13 03:59)
推
sss5
:果然是高手..呵，這樣只要再調整一下width，就可以了
10/13 07:33
→
sss5
:謝謝~~~一點小錢請接受XD
10/13 07:34
→
santin
:我的確是沒仔細算過 XD 也謝謝你的紅包^^
10/13 15:22
