56

ブラウザでは、デフォルトで角をドラッグしてテキスト領域のサイズを変更できます。このルールを他の要素（たとえばdiv）に適用できるかどうか疑問に思いました。この効果はjQuerydraggableまたはjQuery-uiresizable関数を使用して実現できることはわかっていますが、そのライブラリへの依存を回避できる場合は、プレーンなhtml/cssを使用して実現したいと思います。このように動作させるためにdivに適用できるCSSルールはありますか？

他に解決策があれば聞きたいです。

4

2 に答える 2

76

css3resizeプロパティを使用します。

div {
    resize: both;
}

ともresize: horizontalありresize: 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 に答える