讓div的行爲像一張桌子

所以我真的試圖獨佔使用div，而不是使用表格進行佈局，但我仍然陷在這裏和那裏。今天我有其中一種情況。讓div的行爲像一張桌子

考慮下面的標記：

<div style="width:943px;margin:0px auto;height:auto"> 
    <div style="display:block;clear:both"> 
     <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div> 
    </div> 
    <div style="height:auto;display:block;clear:both"> 
     <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div> 
     <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;"> 
      <br /> 
      Some text heeere. 
      <br /> 
      Some more text heeere. 
     </div> 
     <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div> 
    </div> 
    <div style="display:block;clear:both"> 
     <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div> 
     <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div> 
    </div> 
</div>

現在，這是什麼做的它：

alt text http://img97.imageshack.us/img97/4281/screenshot20100215at935.png

注意，它的過去的頁面高度略去。

這就是我想做的事情：

alt text http://img714.imageshack.us/img714/8504/screenshot20100215at936.png

我希望它流體「適合」的文字沒有我指定的高度。似乎問題在於兩側的div除非將高度指定爲100％，否則無法工作。有沒有其他的/更簡單的方法來做到這一點？

謝謝！

來源

2010-02-15 Constant Meiring

爲什麼你要divs行爲像一張桌子？這不是什麼表？使用表格所需的行爲是表格的缺點是什麼？ – Rich 2010-02-15 20:13:54

您可以製作草圖來展示它應該是什麼樣子？很難想象。 – 2010-02-15 20:14:25

@我問自己同樣的問題，但這看起來像合法*佈局*，而不是表格數據。我已經建議使用一張桌子，清理霰彈槍並準備進行火焰戰爭:) – 2010-02-15 20:15:00

你問了一下，所以在這裏。這是我手工製作的，跨瀏覽器，符合標準的在柔性容器上進行圖像邊界的方法。

我假設這裏的圖像邊框大小爲16px，您需要調整它以適應此情況。另外，爲了清晰起見，我添加了邊框。這顯然應該刪除。

Demo。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Borders</title> 
<style> 
.outer { 
    position:relative; 
    float: left; 
    border: 1px solid blue 
} 
.inner { 
    border: 1px solid green 
} 
.tl, .tm, .tr, .ml, .mr, .bl, .bm, .br { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
} 
.tm, .bm, .tl, .tr, .bl, .br { 
    height: 16px 
} 
.tl, .tr, .bl, .br { 
    width: 16px 
} 
.tm, .bm { 
    height: 16px; 
    margin: 0 0px 
} 
.tm { 
    background-repeat:repeat-x; 
    margin: 0 16px 
} 
.bm { 
    background-repeat:repeat-x; 
    margin: 0 16px 
} 
.tl { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.tr { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.bl { 
    position: absolute; 
    left: 0; 
} 
.br { 
    position: absolute; 
    right: 0; 
} 
.ml { 
    padding-left: 16px; 
    background-repeat:repeat-y 
} 
.mr { 
    padding-right: 16px; 
    background-repeat:repeat-y; 
    background-position: 100% 0 
} 
</style> 
</head> 
<body> 
<div class="outer"> 
    <div class="tm"> 
     <div class="tl"></div> 
     <div class="tr"></div> 
    </div> 
    <div class="ml"> 
     <div class="mr"> 
      <div class="inner"> 
       <h2>Lorem</h2> 
       <p>Ipsum dolor</p> 
      </div> 
     </div> 
    </div> 
    <div class="bm" > 
     <div class="bl"></div> 
     <div class="br"></div> 
    </div> 
</div> 
</body> 
</html>

來源

2010-02-16 09:10:48 graphicdivine

謝謝！這就是我一直在尋找的！解決問題的另一種方法。 – 2010-02-16 09:13:04

很高興。真的，離你原來的代碼不遠一百萬英里。 – graphicdivine 2010-02-16 09:22:28

如果數據是表格式（意味着它在語義上屬於正確的行和列，而不是在視覺上），則應該使用表格。

如果只是你喜歡的佈局，有一個CSS規則，可能會幫助，但不是所有的瀏覽器：

div.column { 
    display: table-column; 
} 

div.cell { 
    display: table-cell; 
}

這是假設您將所有的「列」中的div類的column和你的「細胞」分類cell。

的顯示選項表樣行爲的完整列表：

table 
table-caption 
table-cell 
table-column 
table-column-group 
table-footer-group 
table-header-group 
table-row 
table-row-group

來源

2010-02-15 20:25:37 Anthony

這似乎是一個非常冒險的事情。總體思路是將div用於佈局，並將表格用於表格數據。以上是純佈局，而不是表格數據，因此我想使用div。我知道如何使用表來實現這一點，但我想學習如何使用div來以更正確的方式完成此操作。 – 2010-02-15 20:31:25

如何使用CSS規則hacky？特別是當它明確地設計提供表格佈局（你想要的），而不實際使用表格（你的確切目標）？你將不得不在某個地方作出妥協，因爲沒有正確的方法可以在每個瀏覽器和每個屏幕尺寸上運行。我想我會爲你提供專門爲你的需求設計的w3c。使用浮動的方法是很花哨的，因爲浮動的目的是讓文本環繞圖像，而不是做內聯塊。順便說一句，這又是一個你可能要考慮的「黑客」解決方案。 – Anthony 2010-02-15 20:46:39

我是在div的任何一天使用表格，如果只是爲了討論表格本身就是邪惡的普遍（錯誤的）陳詞濫調。但是在這種情況下，我發現希望在沒有表格的情況下工作，並且在沒有'table-*'屬性的情況下達到所需的效果，完全有效。此外，「錶行」和配偶（正如Anthony自己指出的那樣）會給IE家庭帶來麻煩。 – 2010-02-15 20:46:50

如果寬度將是固定的，爲什麼不使用一個背景圖片爲三個「行」的：

<style type="text/css"> 
.container {width:943px;} 
.header  {background:url(header.png) no-repeat;} 
.body   {background:url(body.png) repeat-y;} 
.footer  {background:url(footer.png) repeat-none;} 
</style> 

<div class="container"> 
    <div class="header">&nbsp:</div> 
    <div class="body"> 
     <br /> 
     Some text heeere. 
     <br /> 
     Some more text heeere. 
    </div> 
    <div class="footer">&nbsp;</div> 
</div>

該div自然會堆疊並擴展到容器的全部寬度。

來源

2010-02-15 21:20:05 chprpipr

aaah謝謝。這是我正在尋找的答案類型。這只是解決問題的一種方式。所有其他人都是完全正確的，但他們認爲技術太好了！謝謝！ – 2010-02-16 09:01:34

讓div的行爲像一張桌子

回答

相關問題