高級CSS佈局問題

我想創建一個標題，邊框（左，右，底部）以及內容的對話框。電流源代碼：高級CSS佈局問題

<html> 
<body> 
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> 
<div style="display: table-row;"> 
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div> 
</div> 
<div style="display: table-row;"> 
<div style="background: #0f0; width: 100%; display: table-cell;"> 

<div style="display: table;"> 
<div style="display: table-row;"> 

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> 

<div style="display: table-cell;"> 
<div style="overflow: scroll; white-space: nowrap"> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
</div> 
</div> 

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> 

</div> 
</div> 



</div> 
</div> 
<div style="display: table-row;"> 
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div> 
</div> 

</div> 
</body> 
</html>

產生的

alt text http://img19.imageshack.us/img19/7898/46812649.png

什麼發生在左和右邊界以及爲何大小超過在頂父母指定的寬度（152px）的輸出？

來源

2010-03-15 Tower

如果您打算使用表格，請使用表格。設置塊元素的顯示以模擬各種表格元素充其量是有問題的，並且是非常不可預知的跨瀏覽器。

來源

2010-03-15 12:44:25 Robusto

您使用的內嵌規則過多，請嘗試使用CSS選擇器，類和ID將它們分隔爲div，並適當地使用表格。

一些規則正在取消其他人，這就是爲什麼你沒有看到邊界。

來源

2010-03-15 12:46:36 OverLex

對不起，但您的HTML代碼是一個令人聯想到90年代初的標籤湯的可怕混亂。

由於你的確切問題，寬度更大，因爲你的規則white-space: nowrap拉伸表。這可能是刪除邊界 - 這些「單元格」中沒有內容，因此它們摺疊爲零寬度。

像Robusto說的，如果你想要一張桌子，就用一張桌子。如果你想要一個類似對話框的盒子，你肯定不需要嵌套div標籤。只要有你的外在之一，並使用邊框的規則設定的邊界：

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;"> 
    <h2 style="background:#f00;">top</h2> 
    cwe cwe cwe cwe... 
</div>

來源

2010-03-15 12:55:31 DisgruntledGoat

你不必使用所有這些div s到開始。您可以大幅簡化您的HTML：

<div> 
    <h1>top</h1> 
    <div> 
    <p>cwe cwe cwe</p> 
    <p>cwe cwe cwe</p> 
    </div> 
</div>

並仍然可以輕鬆應用所需的所有樣式。無需爲每個邊界創建一個div。這就是CSS屬性border-left,border-right,border-bottom和border-top是否有用（和古代瀏覽器支持這些，display: table不同）。

來源

2010-03-15 12:58:39

滾動不是由大小造成的，它是由你迫使Scroll值溢出引起的。根據我的經驗，將其設置爲滾動會始終顯示滾動條 - 儘管處於禁用狀態。嘗試將溢出設置爲自動

<div style="overflow: auto; white-space: nowrap">

來源

2010-03-15 13:04:18 Mauro

高級CSS佈局問題

回答

相關問題