如何使用分隔线调整两个div的大小

Question

我有两个垂直分隔的div。我需要使用它们之间的分隔线来调整它们的大小。我在右边的div中有一个缺口，在调整大小时会变得更糟。请帮我得到rad这个不需要的间隙，并使用它们之间的分隔线调整大小。

我有一个代码笔的例子

$( function() {

$("#side").resizable({
handles: 'e'
});

$("#editor").resizable()
.sortable({
items: ".item"
}).disableSelection();

$(".item")
.mousedown
(function(){ $(this).css('cursor','grabbing'); })
.draggable
({ 
revert: "invalid", 
helper: "clone",
connectToSortable: "#editor" 
});

});

#container {
background-color: DodgerBlue;
position: fixed;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
top:0;
left:0;
right:0;
bottom:0;
}
#editor {
float: left;
width: 72%;
height: 100vh;
background:#9999;
text-align: right;
}
#side{
float: left;
width:26%;
min-width: 130px;
max-width: 260px;
height: 100vh;
background:#708090;
border: 1px solid #696969;
color:yellow;
cursor: move;
}
.item{
border: 1px solid #DCDCDC;
border-radius: .4em;
background-color: white;
color: #000;
padding:12px;
margin:10px;
display: inline-block;  
align-content:center;
}
.item:hover{
cursor:grab;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

<div id="container">

<div id="side">
<h3 id="title">I'm resizable</h3>
<i class="fa fa-align-center item"> Section 1</i>
<i class="fa fa-align-center item"> Section 2</i>
<i class="fa fa-align-center item"> Section 3</i>
<i class="fa fa-align-center item"> Section 4</i>
<i class="fa fa-align-center item"> Section 5</i>
<i class="fa fa-align-center item"> Section 6</i>
</div>

<div id="editor" contenteditable="true">
<h3 id="title">I'm editable</h3>
</div>
</div>

Answer 1

解决这个问题的最佳方法是使用flexbox IMO

#container {
background-color: DodgerBlue;
display: flex;
}
#editor {
flex-grow: 1;
height: 100vh;
background:#9999;
text-align: right;
}
#side{
min-width: 130px;
max-width: 260px;
height: 100vh;
background:#708090;
border: 1px solid #696969;
color:yellow;
cursor: move;
}
.item{
border: 1px solid #DCDCDC;
border-radius: .4em;
background-color: white;
color: #000;
padding:12px;
margin:10px;
display: inline-block;
}
.item:hover{
cursor:grab;
}

你可能会用一些高度的东西来清理它，但这里有一些基本的东西：(

我强烈建议你擅长Flexbox，它让使用CSS的生活变得更轻松。Flexbox摘要