사용자는 나란히 놓인 div를 드래그하여 너비를 조정할 수 있습니다.

Question

두 개의 div가 나란히 있습니다. 간단한 해결 방법이 있는 경우 사용자가 드래그하여 두 div의 너비 크기를 조정할 수 있습니다.

한 div의 너비가 늘어나면 다른 div의 너비는 줄어들고 두 div의 너비 합계는 변경되지 않습니다.

순수한 자바스크립트나 CSS를 이용해 구현할 수 있다면 정말 좋겠습니다. div와 같은 다른 항목을 자유롭게 추가하세요.

두 div의 코드는 다음과 같습니다.

.left {
    왼쪽으로 뜨다;
    너비: 49%;
    최소 높이: 50px;
    테두리: 2px 점선 #f0f
}

.오른쪽 {
    플로트: 오른쪽;
    너비: 49%;
    최소 높이: 50px;
    테두리: 2px 점선 #00f
}

<div class="right"></div>
<div class="왼쪽"></div>

어떤 아이디어라도 감사드립니다!

Answer 1

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

두 가지:

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

MDN 참조: 크기 조정

으아악 으아악