Question

我有两个垂直分隔的div。我需要使用它们之间的分隔线来调整它们的大小。我的右手div有空隙，并且在调整大小时会变得更糟。请帮助我弥补不必要的差距，并使用它们之间的分隔线来调整尺寸。

有一个例子

$( 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。这是对CSS所做的更改，使它们全部正常工作：

#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 Summary

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

1 个答案: