사용자는 나란히 놓인 div를 드래그하여 너비를 조정할 수 있습니다.
P粉690200856
2023-08-28 17:28:25
<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>
호기심에서 나는 약간의 실험을 만들었고 메인 Flexbox 컨테이너
.wrapper
来包含.left
和.right
요소를 사용하고 flexbox 메커니즘이 어려운 작업을 수행하도록 하는 것이 훨씬 쉽다는 것을 알았습니다.두 가지:
resize
时,属性overflow
需要设置为auto
를 사용하여 handles을 표시하는 경우(Windows Firefox 및 Chrome/Edge에서 테스트됨).left
。因为它们是弹性盒子的子元素,所以在另一个元素上使用flex: 1
(.right
) flexbox 메커니즘은 요소가 크기가 조정된 요소의 크기를 따르도록 하고 남은 공간을 채웁니다.MDN 참조: 크기 조정