как изменить размер двух div, используя разделяющую линию между ними? - PullRequest
Новая
       70

как изменить размер двух div, используя разделяющую линию между ними?

1 голос
/ 14 июля 2020

У меня два блока разделены вертикально. и мне нужно изменить их размер, используя разделительную линию между ними. У меня есть пробел в правом 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>

1 Ответ

0 голосов
/ 14 июля 2020

Лучший способ решить эту проблему - использовать 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

...