css - 行數的最小高度

我想我已經知道這個答案了，但我希望也許有人會有一個簡單的技巧。css - 行數的最小高度

我想指定一個DIV的最小高度，但不是基於px /％。（我知道這聽起來很奇怪，但它是出於兼容性原因/響應）

基本上我希望能夠通過行數來指定它。

我有一個網格DIVS，但裏面的元素不固定，所以一個元素可以有3行，而下一個只有2或1行。這會弄亂佈局。

基本上，我需要的是這樣的：

=====================  =====================  ===================== 
    Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
    amet, consectetur   amet, consectetur   amet, consectetur 
    adipiscing elit. 
    =====================  =====================  ===================== 

    =====================  =====================  ===================== 
    Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
    amet, consectetur   amet, consectetur 
           adipiscing elit. 
    =====================  =====================  =====================

而不是此：

=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   amet, consectetur 
adipiscing elit.   =====================  ===================== 
===================== 
          =====================  ===================== 
=====================  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
Lorem ipsum dolor sit  amet, consectetur   ===================== 
amet, consectetur   ===================== 
adipiscing elit.    
=====================

可這樣的事情可以通過指定的「我要三線」來實現？（相對於像素，百分比/ EM？）

編輯我

後評論 -

我真正想要的是像表單元素，INPUT或TEXTAREA，你可以簡單地用行/字符指定高度和寬度！

<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>

很難Ø相信沒有人發明了這樣一個解決方案，把我們都帶PX/EM /％計算，喜歡奮鬥..

來源

2012-06-22 Obmerk Kronen

您應該使用clearfix hack

它可以讓你在沒有指定任何高度的情況下讓你的div對齊。這就像一個行分隔符：

=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   amet, consectetur 
adipiscing elit.   =====================  ===================== 
=====================  
{clearfix} 
=====================  =====================  ===================== 
Lorem ipsum dolor sit  Lorem ipsum dolor sit  Lorem ipsum dolor sit 
amet, consectetur   amet, consectetur   ===================== 
=====================  adipiscing elit. 
          =====================

您還可以設置每個DIV高度/保證金，當然：

編輯：

對於內部大小相等，而無需使用表，你有幾種解決方案：

Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.

Using display-table attribute (Method 1)

Or using javascript (Method 3)

來源

2012-06-22 07:23:02 zessx

肯定的，div一定爲他們之間的空間保持一致，但沒有自己的尺寸.. –

但是沒有一個問題可以設置自己的大小，這只是一個CSS規則。你的問題是容器的大小，對吧？ – zessx

nope - 問題在於它們的INTERNAL尺寸。 –

我不知道你爲什麼要這樣..但你可以根據你要使用的字體的大小來修正div類的高度和寬度。說你的字體大小是10px，你會使用10px填充，然後使用50px高度的div ..然後添加一個margin-bottom這些divs，你很好去我想！

來源

2012-06-22 07:24:48

謝謝，我之前有過這個解決方案 - 但就像我說的，我正在嘗試看看它是否可以無限制地指定和px尺寸......另外，通過添加一個邊距底部，它也會被附加到完整的潛水，不僅是半空的.. –

我不認爲如果它可以像這樣將高度和寬度添加到div。就像我們用textarea做的一樣。我希望有一些黑客在那裏。需要了解。 –

這裏的確切我的問題：找到一個黑客來指定一個像輸入區域一樣的線高度！（也許有人應該向css3開發團隊推薦它:-)） –

你爲什麼如此反對在ems中設置min-height的想法？如果您在ems中設置了line-height，請將其乘以3，然後獲得所需的高度！

div { 
    line-height:1.5em; 
    min-height:4.5em; 
    float:left; 
    width:33%;/*close enough*/ 
}

Fiddled

更新：最小高度設置爲三條線是徒勞的 - 它沒有考慮場景中的內容不適合可用的空間。您可以使用faux columns來代替使內容在行內顯示爲統一高度

來源

2012-06-22 07:59:18

感謝您的回答 - 它完全說明了問題。請注意調整小提琴中的輸出窗格？ :-) –

我假設一個固定寬度的佈局。無論如何，當內容*不適合三行時，你打算做什麼？如果你不關心（並且你沒有爲這個場景指定行爲），只需將min-height設置爲高度並將溢出設置爲隱藏。在此期間，我會更新我的答案以使用人造色譜柱 –

@ObmerkKronen：只是爲了澄清我上面的評論，您在問題中說*一個元素可以有3行，而下一個元素只有2或1行*這意味着您可以控制容器寬度，並且可以保證內容不會超過3行。當您將jsfiddle預覽調整爲較窄時，您不再保證 –

我使用flexbox和min-height完成了此操作。

分別具有flexbox容器內的div元素，讓他們具有相同的高度和響應的反應（即使用斷點，Flexbox的wrap，並min-width，以確保有超過3行文字的概率低）。然後，對於每個內部元素，請將@ 0.v設置爲min-height和line-height值。建議。 min-height應該等於font-size * line-height乘數。

我需要內部段落至少2行高（他們很可能會包含1或2行文本，其中包含超過2行文本的概率很低），所以這是我結束了：

HTML

<div class="flex-container"> 
    <div> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    </div> 
    <div> 
    <p>Lorem ipsum...</p> 
    <p>Lorem ipsum...</p> 
    </div> 
</div>

CSS

div.flex-container { 
    display: flex; 
} 
div.flex-container p { 
    font-size: 1em; 
    line-height: 1.125; // Default is 1.2, but varies by browser 
    min-height: 2.25em; // 2 * 1em * 1.125 
         // (number of lines) * (font-size) * (line-height multiplier) 
}

來源

2016-08-15 22:05:50 dignoe

css - 行數的最小高度

回答

相關問題