div와 같은 크기 조정 가능 텍스트 영역

브라우저를 사용하면 텍스트 영역의 모서리를 기본적으로 드래그하여 크기를 조정할 수 있습니다. 이 규칙이 다른 요소 (예 : div)에 적용될 수 있는지 궁금합니다. 이 효과는 jQuery draggable 또는 jQuery-ui resizable 함수를 사용하여 얻을 수 있지만이 라이브러리에 의존하는 것을 피할 수 있다면 일반 html/css로하고 싶습니다. 이런 식으로 동작하도록 div에 적용 할 수있는 CSS 규칙이 있습니까?div와 같은 크기 조정 가능 텍스트 영역

다른 해결책이 있다면 알려주십시오.

출처

2012-06-22 codelove

css3 resize 속성을 사용하십시오.

div { 
    resize: both; 
}

도 resize: horizontal와 resize: vertical 있습니다.

되지 않음 현재 크로스 브라우저 http://caniuse.com/#feat=css-resize

출처

2012-06-22 20:56:16 sachleen

, unfortunatelly은 어떤 IE 버전에서 작동하지 않습니다. Internet Explorer에 이러한 resise를 지원할 수있는 방법이 있습니까? –

당신은'overflow : auto;'해야 할 수도 있습니다. – HEX

이렇게하면 모든 하위 요소들도 핸들을 얻습니다. 왜 이런거야? –

당신은 CSS3를 사용하여이 작업을 수행 할 수 있습니다. 크기 재조정 및 오버플로 스타일을 설정하여 재구성 가능한 div 태그를 만들 수 있습니다. 내가 여기에 수평 및 수직 모두 크기를 설정 한 :이 굉장

.isResizable { 
 
    background: rgba(255, 0, 0, 0.2); 
 
    font-size: 2em; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    resize: both; 
 
    width: 160px; 
 
    height: 120px; 
 
    min-width: 120px; 
 
    min-height: 90px; 
 
    max-width: 400px; 
 
    max-height: 300px; 
 
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>

출처

2012-06-22 20:58:26

좋은 답변입니다. jquery 없이도 할 수 있다면 알 수있는 기회가 있지만 크기를 조절하려면 클릭하는 그립을 만드는 것, div의 전체면을 알고 계신가요? 당신이 주제를 게시 할 때 stackoverflow처럼 전체 하단을 찍을 수 있습니다. – Ced

div와 같은 크기 조정 가능 텍스트 영역

답변

관련 문제