$('#content').resizable();
<div id="content"> <div id="float"> <h4>Floating blocks:</h4> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div id="inline"> <h4>Inline blocks:</h4> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> <div id="tip">←虛線可拖曳縮放</div>
#inline > div { display: inline-block; width: 78px; height: 78px; background: #FFFFAA; border: 1px dotted gray; font-size: 32px; text-align: center; vertical-align: middle; line-height: 78px; } #float > div { float: right; width: 78px; height: 78px; background: #FFAAFF; border: 1px dotted gray; font-size: 32px; text-align: center; vertical-align: middle; line-height: 78px; } #float:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } #inline, #float { display: block; /* display: inline-block; */ width: 100%; } #inline h4, #float h4{ font-size: 14px; margin-top: 0; } #inline { background: #CCCCFF; text-align: right; } #float { background: #CCFFCC; } #content { font-size: 0; display: inline-block; max-width: 400px; width: 100%; height: auto; border: 1px dotted gray; } #tip { display: inline-block; vertical-align: top; }