사용자는 나란히 놓인 div를 드래그하여 너비를 조정할 수 있습니다.
P粉690200856
P粉690200856 2023-08-28 17:28:25
0
1
418
<p>두 개의 div가 나란히 있습니다. 간단한 해결 방법이 있는 경우 사용자가 드래그하여 두 div의 너비 크기를 조정할 수 있습니다. </p> <p>한 div의 너비가 늘어나면 다른 div의 너비는 줄어들고 두 div의 너비 합계는 변경되지 않습니다. </p> <p>순수한 자바스크립트나 CSS를 이용해 구현할 수 있다면 정말 좋겠습니다. div와 같은 다른 항목을 자유롭게 추가하세요. </p> <p>두 div의 코드는 다음과 같습니다. </p> <pre class="brush:php;toolbar:false;">.left { 왼쪽으로 뜨다; 너비: 49%; 최소 높이: 50px; 테두리: 2px 점선 #f0f } .오른쪽 { 플로트: 오른쪽; 너비: 49%; 최소 높이: 50px; 테두리: 2px 점선 #00f }</pre> <pre class="brush:php;toolbar:false;"><div class="right"></div> <div class="왼쪽"></div></pre> <p>어떤 아이디어라도 감사드립니다! </p>
P粉690200856
P粉690200856

모든 응답(1)
P粉020085599

호기심에서 나는 약간의 실험을 만들었고 메인 Flexbox 컨테이너 .wrapper 来包含 .left.right 요소를 사용하고 flexbox 메커니즘이 어려운 작업을 수행하도록 하는 것이 훨씬 쉽다는 것을 알았습니다.

두 가지:

  • resize 时,属性 overflow 需要设置为 auto를 사용하여 handles을 표시하는 경우(Windows Firefox 및 Chrome/Edge에서 테스트됨)
  • 크기 조정이 가능하고 내가 선택한 핸들이 있는 하위 요소를 선택하면(.left。因为它们是弹性盒子的子元素,所以在另一个元素上使用 flex: 1.right) flexbox 메커니즘은 요소가 크기가 조정된 요소의 크기를 따르도록 하고 남은 공간을 채웁니다.

MDN 참조: 크기 조정

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿