預溢出比例表

表試圖創建一個簡單的（公頃）兩列布局，其中第一列是可變寬度，第二列是固定大小。預溢出比例表

第一列包含一個工作正常的表，除非td元素包含前置塊。在這種情況下，前塊延伸到第二列。

下面是一個簡單的例子：

 
<div class="content"> 
    <div id="Left"> 
    <table id="q-table"> 
     <tr><td> 
     <div class="q"> 
      <p>This is some paragraph that will be fairly long and wrap.</p> 
      <pre>This is a very long pre tag that causes headaches.</p> 
     </div> 
     <div> 
      <p>Causes problems if I make class q position: absolute</p> 
     </div> 
     </td></tr> 
    </table> 
    </div> 
    <div id="Right"> 
    <p>This is a paragraph on the right with fixed width</p> 
    </div> 
</div>

下面是我用這個例子的CSS樣式：

 
.content { 
    width: 95%; 
    position: relative; 
} 
#Left { 
    width: 50%; 
    float: left; 
} 
#Right { 
    float: right; 
    width: 200px; 
} 
#q-table { 
    width: 99%; 
} 
.q { 
    overflow: auto; 
    width: 99% 
}

如果我做.Q階級立場：絕對的則水平流量大多表現得像我想要的，但接下來的div部分向上移動並擾亂垂直對齊。

預標籤是罪魁禍首。刪除它會導致正確的行爲。不幸的是，預標籤是必要的。

想想一個StackOverflow佈局，其中一個代碼問題將顯示在小屏幕上的滾動條上，但如果我有一個大型監視器，問題區域將會擴展並且滾動條會消失。

任何人有任何想法？
CSS是否爲我想要做的事提供支持？

來源

2011-05-16 Benoit

這可能不會提供所需的結果。但您可以改爲調整white-space屬性。

例如，將其設置爲normal會使其行爲像，比如說，一個p標籤：

pre { 
    white-space: normal; 
}

看到它在行動 - http://jsfiddle.net/az85F/

否則，設置width和overflow性能。這就是這個論壇爲代碼示例所做的。一個簡單的例子 - http://jsfiddle.net/mj6Nh/1/

來源

2011-05-16 01:26:40

不能用pre標籤包裝行（否則，空白將工作謝謝！）。另外，因爲我希望它是成比例的，所以我必須使用相對寬度（在.q中設置）。如果我使用固定寬度，那麼問題完全消失...但我需要流動:(注意，溢出也設置在.q中，並且滾動條顯示，但又一次，它延伸過「左」元素。 – Benoit 2011-05-16 01:53:53

多孔牛！jsfiddle真棒！感謝指針！仍然不能幫助我解決問題，但讓實驗更容易！ – Benoit 2011-05-16 01:56:39

我在示例中刪除了'.q'規則。要設置'width'的相對值，使用百分比注意第二個例子 – 2011-05-16 01:56:51

我得出的結論是，根本無法提供所描述的行爲。

我相信問題是表和標籤相互衝突。
當其中一個單元元素使用pre標籤時，該表不執行比例間距指令。

來源

2011-06-04 22:06:54 Benoit

預溢出比例表

回答

相關問題