我無法用CSS

我的CSS正確設置我的HTML元素的高度：我無法用CSS

 .reviewRow 
     {  
      clear:both; 
      padding-top:0; 
      margin-top:0; 
     } 
     .reviewBlock 
     { 
     float:left; 
     height:100%; 
     padding-top:0; 
     margin-top:0; 
     border-top: 1px solid #444; 
     border-left: 1px solid #444; 
     } 
     .reviewCaption 
     { 
      font: normal normal normal 6pt verdana;padding-left:0.03in; 
     } 
     .reviewText 
     { 
      font: normal normal normal 8pt verdana; 
      height:20px; 
     }

我的HTML：

<body> 
<div style="HEIGHT: 30px" class=reviewRow> 
    <div style="WIDTH: 125px" class=reviewBlock> 
     <div id=reviewBeneficiaryType class=reviewText>This text is too big to fit inside a 30px height cell, so I want it to get bigger. 
     </div> 
    </div> 
</div> 
</body>

以上的HTML文件從一個網頁，我除外遇到麻煩。它是動態生成的，因此裏面的文本可能很短或很長。通常情況下，我希望這會渲染一個盒子高30像素的文本框，除非文本太大，在這種情況下，框會展開以適應文本。

問題是，當這個HTML出現在另一個頁面中時，文本「溢出」框。我不明白問題是什麼。更復雜的是，如果我刪除「高度」風格，它實際上會使箱子更高。我已經看過MDN documentation。它清楚地表明，默認情況下，CSS「溢出」的值是「可見的」，在這種情況下文本「可能會溢出」，但在任何情況下我都不希望滾動條出現。

我曾嘗試修改包含元素的「位置」CSS，但似乎沒有做任何事情。

什麼可能導致這裏的問題？

更新我發現了什麼似乎是造成問題！這是doctype聲明！如果我從摘錄的頁面中刪除doctype聲明，它將渲染罰款！爲什麼？

來源

2012-12-11 Daniel Allen Langdon

爲什麼.reviewText的高度：20px？如果你刪除高度，它將是高度：默認爲自動。你只需要設置reviewBlock的寬度，你很清楚。 http://codepen.io/joe/pen/rAKqh –

我發現的問題是，DOCTYPE聲明，從頁面的一人失蹤。如果我在兩個頁面上使用相同的DOCTYPE聲明，那麼CSS似乎以完全相同的方式解釋。

至於如何寫恰當的CSS，這將是一個單獨的問題，如果我需要進一步的幫助。

感謝您的幫助！我已經提出了所有我收到的答案。

來源

2012-12-12 14:46:10

你正在爲你的div指定高度，如果文字變得更明顯，它會像瓶裝水一樣溢出容器; t被倒入小玻璃杯中，所以你需要overflow: scroll;， t想要使用你要麼使你的height: auto;這將增加箱子的大小相應的文字，它包含與min-height: 30px; ..定位元素在這裏不會幫助你..你不需要卷軸，你不需要您的容器自動調整大小，而不是實際需要的大小？

如果你希望你的文字是這樣的

------------------------------------------ 
| This is a pretty long long long long...| 
------------------------------------------

不是嘗試這個

text-overflow:ellipsis;

來源

2012-12-11 18:36:32

我認爲你在做點什麼。我試着將高度設置爲'自動'，突然div增長到約1000像素高。這看起來與包含DIV（這是一個固定高度）之一的高度差不多。我認爲這包含DIV與這個問題有關。 –

@DanielAllenLangdon身高必須得到繼承 –

好的，這是別的。我試圖從這個HTML中刪除所有CSS高度屬性。這導致框擴展爲包含文本，但是邊界全部被混淆並且未對齊。這裏的問題是，在真實網頁上有很多DIV文件摘錄。每個DIV中有幾個用'reviewRow'類裝飾。 –

，如果你通常看到normalise.css或reset.css他們設置高度的HTML元素到100％..做同樣的事情就可以做到。

html{ 
height:100% /* auto will also do */ 
}

http://jsfiddle.net/SwCKU/ ..檢查這個小提琴。

來源

2012-12-11 18:39:12

儘量給min-height:20px;max-height:400px;到.reviewText

來源

2012-12-11 18:44:32 5hahiL

回答

相關問題