Question

div {
   resize: horizontal;
}

用户必须拖动右下角以调整其大小。但是对于网站布局，用户习惯于在导航面板上拖动左/右边缘（边框）。例如，边框布局。

div {
   resize: horizontal right
}

是否有CSS等效项？

Answer 1

不幸的是，CSS和resize属性不允许将手柄放置在特定位置。它将始终位于右下角。

如果要将手柄放置在特定位置，则可能需要使用Javascript库或jQuery插件，例如jQuery UI Resizable plugin。

$(".resizable").resizable({
  handles: {
    'e': '.grip'
  }
});

.resizable {
  position: relative;
  width: 100px;
  height: 100px;
}

.resizable textarea {
  position: absolute;
  width: 100%;
  height: calc(100% - 6px);
  resize: none;
}

.resizable .grip {
  position: absolute;
  background-color: black;
  height: 100%;
  width: 5px;
  right: -5px;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="resizable">
  <textarea></textarea>
  <div class="grip ui-resizable-handle ui-resizable-e"></div>
</div>

CSS调整大小：拖动垂直边框？

1 个答案: