Question

我正在尝试制作类似于JSFiddle布局的布局，也就是可调整大小的网格。您可以在下面的代码段或此JSFiddle中看到它。

$("#left").resizable({
  alsoResize: "#right",
  handles: "e"
});

$("#right").resizable({
  alsoResize: "#left",
  handles: "w"
});

$("#text").resizable({
  handles: "s"
});

$("#css").resizable({
  handles: "s"
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.section {
  float: left;
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
.section#text {
  clear: both;
  height: 20vh;
}
.section#css {
  clear: both;
  height: 30vh;
}
.section#animation {
  clear: both;
  height: 50vh;
}
.section#result {
  height: 100vh;
}
.section.container {
  width: 50%;
  border: 0;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<div id="left" class="section container">
  <div id="text" class="section"></div>
  <div id="css" class="section"></div>
  <div id="animation" class="section"></div>
</div>
<div id="right" class="section container">
  <div id="result" class="section"></div>
</div>

为了能够调整我使用div函数resizeable的jQueryUI元素的大小。但是，如果您使用代码示例，您将看到网格未包含在初始屏幕大小中。相反，div元素可以相互调整大小并在屏幕外。

正如您将在代码示例中看到的，使用诸如alsoResize之类的方法不起作用。我也试图使用诸如containment之类的方法，但这似乎也没有帮助。

我很感激任何有助于正常工作的帮助

调整多个div的大小以保持布局正确

0 个答案: