56

浏览器默认允许通过拖动角来调整文本区域的大小。我想知道这条规则是否可以应用于其他元素(例如 div)。我知道可以使用 jQuerydraggable或 jQuery-uiresizable函数来实现此效果,但如果可以避免依赖该库,我想使用纯 html / css 来实现。我可以将它们应用于 div 以使其以这种方式运行的任何 CSS 规则吗?

如果您有任何其他解决方案,我想听听。

4

2 回答 2

76

使用 css3resize属性。

div {
    resize: both;
}

还有一个resize: horizontalresize: vertical


目前不能跨浏览器http://caniuse.com/#feat=css-resize

于 2012-06-22T20:56:16.003 回答
41

您可以使用 CSS3 执行此操作。您可以通过设置调整大小和溢出样式来创建用户可调整大小div的标签。我在这里将调整大小设置为水平和垂直:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}
<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>

于 2012-06-22T20:58:26.300 回答