0

我正在为此处演示的 Go 语言（这不是 Go 问题）的演示工具进行扩展。

当前，当在演示文稿中运行可运行的代码片段时，会显示固定大小的输出面板，例如此处（您可以单击该页面上的“运行”按钮以在片段中运行 Go 代码 - 在服务器端执行）。我有一个更改列表，允许 jquery-ui 从 N、W 和 NW 句柄调整面板的大小。这都很好。这是执行此操作的相关代码和CSS：

play.js（片段）：

  function init(code) {
    var id = getId();

    var output = document.createElement('div');
    var outpre = document.createElement('pre');
    var stopFunc;

    $(output).resizable({handles: "n,w,nw"});

    function onKill() {
      if (stopFunc) {
        stopFunc();
      }
    }

    function onRun() {
      onKill();
      outpre.innerHTML = "";
      output.style.display = "block";

    ... more

样式.css（片段）：

/* Code */
div.code {
  outline: 0px solid transparent;
}
div.playground {
  position: relative;
}
div.output {
  position: absolute;
  left: 50%;
  top: 50%;
  right: 40px;
  bottom: 40px;
  background: #202020;
  padding: 5px 10px;
  z-index: 2;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

}
div.output pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto;
}
div.output .stdout, div.output pre {
  color: #e6e6e6;
}
div.output .stderr, div.output .error {
  color: rgb(244, 74, 63);
}
div.output .system, div.output .exit {
  color: rgb(255, 209, 77)
}
.buttons {
  position: relative;
  float: right;
  top: -60px;
  right: 10px;
}
div.output .buttons {
  position: absolute;
  float: none;
  top: auto;
  right: 5px;
  bottom: 5px;
}

/* Output resize details */
.ui-resizable-handle {
  position: absolute;
}
.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}
.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

除了一个问题之外，这几乎可以满足我的所有需求：我想为输出面板指定最小尺寸，以便控制按钮始终被面板包围。我可以使用 div.output 中的 min-height 和 min-width CSS 属性来实现这一点，除了这些属性通过移动面板的底部/右侧边缘来强制最小值。

如何在保持底部和右侧边缘位于其原始位置的同时指定最小高度和宽度？

4

1 回答 1

0

您可以对按钮使用相对绝对定位。因此，您可以将<pre>标签的最小高度设置为比输出框的最小高度小 36 像素。然后，将按钮的 div 定位到输出 div 中您想要的任何位置。

div.输出{
位置：相对；
}

div.buttons {
位置：绝对；
底部：0；
右：150px；
}

于 2013-04-19T00:28:05.110 回答