浏览器默认情况下可以通过拖动角来重新调整文本区域的大小。我想知道这个规则是否可以应用于其他元素(例如div)。我知道使用jQuery draggable
或jQuery-ui resizable
函数可以实现这种效果,但如果可以避免依赖该库,我想用普通的html / css来实现。他们可以将任何CSS规则应用于div以使其以这种方式运行吗?
如果您有任何其他解决方案,我希望听到它。
答案 0 :(得分:60)
答案 1 :(得分:33)
您可以使用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>