时间戳

首页 > 解决方案 > 如何使用它们之间的分隔线调整两个 div 的大小？

jquery - 如何使用它们之间的分隔线调整两个 div 的大小？

问题描述

我有两个垂直分隔的 div。我需要使用它们之间的分隔线来调整它们的大小。我的右手 div 有间隙，并且在调整大小时会变得更糟。请帮助我消除这种不需要的间隙，并使用它们之间的分隔线来调整大小。

我在codepen有一个例子

$( 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>

标签： jquerycssjquery-ui

解决方案

解决这个问题的最好方法是使用 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 的生活变得更加轻松。弹性盒总结

推荐阅读