divの場合は、最初にボックスのサイズを高さから幅まで増やす方法は？

Question

.box { 
 
    background-color: DarkSeaGreen; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
    min-height: 50px; 
 
    min-width: 50px; 
 
    max-height: 100px; 
 
    max-width: 100px; 
 
}

<div class="box"> 
 
    ab cd ef gh ij kl mn 
 
</div>

上記のコードで

私はテキストを入れ始めた場合、我々はデフォルトで100

としてmin-heightとmin-width 50などとmax-heightとmax-widthを使用している、デフォルトの動作では、DIVボックスが増加することです最初に幅のレベルでサイズします。最初に50から100の幅を増やし、次に高さの増加を開始します。

注文を変更できるかどうかを知りたいと思います。すなわち、まず高さによって、次に幅によって決定される。

つまり、最初にmin-heightからmax-heightに成長する必要があります。最大の高さに達すると、幅の増加が開始されます。

Answer 1

あなたのブラウザがデフォルトでwrite-mode：horizo​​ntal-tbのCSSプロパティを使用しているためです。テキストは、左から右へ、次に上から下へとボックスを塗りつぶします。これは西洋のほとんどの地域で単語を書く方法です。 CSSをwriting-mode：vertical-lrに変更すると、テキストはボックスを上から下に、次に左から右に塗りつぶします。その場合は、ボックスが最大高さに達したことを確認してから、限界に達するまで幅を広げてください。

も参照してください。https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode