2017-12-26 3 views
1

div의 경우 너비를 먼저 높이고 너비를 늘리는 방법은 무엇입니까?

.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-heightmin-width 50 및 max-heightmax-width를 사용하고, 기본 동작은 DIV 상자가 증가 할 것입니다 처음에는 너비 레벨에서 크기가됩니다. 먼저 폭이 50에서 100으로 증가한 다음 높이를 높이기 시작합니다.

주문을 변경할 수 있는지 알고 싶습니다. 즉 먼저 높이에 의해 그리고 나서 폭에 의해 결정된다.

즉, 먼저 최소 높이에서 최대 높이까지 자랍니다. 최대 높이에 도달하면 너비가 늘어납니다.

+2

에 오신 것을 환영합니다! 최소한이 코드를 직접 작성하려고 할 것으로 예상됩니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –

+0

귀하의 의견을 주셔서 감사합니다 ... 우리는 내부 연구를했는데 .. 웹 디자이너 회사 중 하나를 확인했습니다.하지만 아무도 어떤 솔루션을 줄 수 .. 내가 stackoverflow에 게시했습니다. – vishal

답변

0

귀하의 브라우저가 기본적으로 writing-mode : horizontal-tb의 CSS 속성을 사용하고 있기 때문입니다. 텍스트는 상자를 왼쪽에서 오른쪽으로 그리고 위에서 아래로 채우고 서구 세계 대부분에서 단어를 쓰는 방식입니다. CSS를 쓰기 모드 : vertical-lr로 변경하면 텍스트가 상자를 위에서 아래로 그리고 왼쪽에서 오른쪽으로 채 웁니다. 이 경우 상자를 채우면 최대 높이로 이동 한 다음 한도에 도달 할 때까지 너비를 늘립니다.

도 참조 스택 오버플로 https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

+0

방향을 제공해 주셔서 감사합니다 ...이 옵션을 선택했습니다 ..... 일단 필기 모드를 세로로 설정하면 텍스트가 세로로 커집니다 .... (문서마다 발생하는 것으로 가정 됨) ......... 우리의 경우에는 ... 텍스트가 수평으로 커지게하고 싶습니다. 그러나 div 상자는 수직으로, 그리고 나서 수평으로 성장해야합니다. – vishal

관련 문제