可以利用文字会环绕浮动元素的特性来做：
HTML:
#box { width: 400px; height: 600px; background-color: red;}#box .float-div{ float: left; // 浮动起来 clear: both; // 这个很重要，不然会排版出错 background: rgba(0,0,0,0.2); // 这里只是为了看看而已}<div id="box"> <span id="text">我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，我是一段文本而已，</span></div>JS
// JS 部分仅仅是为了生成 div, 就不多优化了var box = document.getElementById('box')var text = document.getElementById('text')var bH = box.offsetHeightvar bW = box.offsetWidthvar step = 10var dH = 10var dW = bW - step * 4var num = parseInt(bH / dH)var tem = document.createdocumentFragment()for(var i=0;i < num && dW > 0;i++){ var d = document.createElement('div') d.style.height = dH + 'px' d.style.width = dW + 'px' d.classList.add('float-div') tem.appendChild(d) dW -= step}box.insertBefore(tem,text)效果：
