Saya mempunyai dua div sebelah menyebelah. Jika terdapat sebarang penyelesaian mudah, benarkan pengguna mengubah saiz lebar kedua-dua div dengan menyeret.
Jika lebar satu div bertambah, lebar div lain berkurangan, mengekalkan jumlah lebar dua div tidak berubah.
Alangkah bagus jika ia boleh dilaksanakan menggunakan javascript atau css tulen. Jangan ragu untuk menambah item lain seperti div.
Kod untuk dua div adalah seperti berikut:
.left { terapung: kiri; lebar: 49%; ketinggian min: 50px; sempadan: 2px putus-putus #f0f } .betul { terapung: betul; lebar: 49%; ketinggian min: 50px; sempadan: 2px putus-putus #00f } Terima kasih atas sebarang idea!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Atas rasa ingin tahu, saya mencipta sedikit percubaan dan mendapati ia lebih mudah untuk dilaksanakan menggunakan elemen
.wrapper来包含.left和.rightbekas flexbox utama dan membiarkan mekanismeflexboxmelakukan kerja keras.Dua perkara:
resize时，属性overflow需要设置为autountuk menjadikanpemegangkelihatan (diuji pada Windows Firefox dan Chrome/Edge)..left。因为它们是弹性盒子的子元素，所以在另一个元素上使用flex: 1（.right), mekanismeflexboxakan menjadikan elemen mengikut saiz elemen yang diubah saiz dan mengisi sebarang ruang yang tinggal.Rujukan MDN: ubah saiz
/* 用于轻松调整 .right 大小的弹性盒容器 */ .wrapper { display: flex } .left, .right { /* 初始大小，浏览器将记住上次状态直到页面重新加载 */ width: 50%; min-height: 50px; /* 至少要有一些内容显示 */ min-width : 50px; } .left { overflow: auto; /* 必须使手柄可见 */ resize: both; /* 启用双向调整大小 */ /* 在单个方向上使用 horizontal/vertical */ } .right { flex: 1; /* 将填充剩余的水平/垂直空间 */ } /* 美化 */ .left { border: 2px dashed #f0f } .right { border: 2px dashed #00f }