38

私はすでにこれに対する答えを知っていると思いますが、誰かがそのための巧妙なトリックを持っていることを願っています.

DIV の min-height を指定したいのですが、 px / % based ではありません。(奇妙に聞こえるかもしれませんが、互換性の理由/応答性のためです)

基本的には行数で指定できるようにしたいです。

私は DIVS のグリッドを持っていますが、内部の要素は固定されていないため、1 つの要素には 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.             
=====================

この種のことは、指定された「3行が必要」で実現できますか? (ピクセルではなくパーセンテージ/em??)

編集 I

コメントの後 -

私が本当に欲しいのは、行/文字で高さと幅を簡単に指定できる FORM 要素、INPUT または TEXTAREA のようなものです!

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

誰もそのような解決策を発明しておらず、私たち全員が PX / em / % の計算などに苦労することになったとは信じがたい..

4

4 に答える 4

34

なぜあなたmin-heightはemsで設定するという考えにそれほど反対しているのですか？emsを設定している場合はline-height、これに3を掛けると、希望の高さが得られます。

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

いじる

更新：min-heightを3行に設定することは、無駄な作業です。コンテンツが使用可能なスペースに収まらないシナリオは考慮されていません。代わりに偽の列を使用して、コンテンツが行内で均一な高さであるように見せることができます

于 2012-06-22T07:59:18.473 に答える
6

clearfixハックを使用する必要があります

高さを指定せずに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に高さ/マージンを設定することもできます。

編集 ：

テーブルを使用しない内部の同じサイズの場合、いくつかの解決策があります。

背景のみを使用する場合はoverflow:hidden、親で使用し、子で追加を使用します。margin-bottom

display-table属性の使用（方法1）

またはjavascriptを使用する（方法3）

于 2012-06-22T07:23:02.007 に答える
0

なぜそれが必要なのかわかりませんが、使用するフォントのサイズに応じて div クラスの高さと幅を修正できます。フォント サイズが 10 ピクセルで、10 ピクセルのパディングを使用し、高さ 50 ピクセルの div を使用するとします。次に、それらの div にmargin-bottomを追加すれば、問題ないと思います。

于 2012-06-22T07:24:48.467 に答える