-
float + 两层DOM实现
html<div class="container"> <div class="div1 clearfix"> <div>1</div> <div>2</div> <div>3</div> </div> </div>
css
.container { width: 200px; overflow: hidden; } /* float:left */ .div1 { overflow: hidden; width: 700px; } .div1 > div { width: 200px; float:left; margin-left: 10px; background: green; border:1px solid red; }
-
display:inline-block + 两层DOM 实现
<div class="container"> <div class="div2"> <div>1</div> <div>2</div> <div>3</div> </div> </div>
css
/* display: inline-block */ .div2 { overflow: hidden; width: 700px; } .div2 > div { width: 200px; display: inline-block; border: 1px solid green; }
-
white-sapce:nowrap 减少一层DOM
html<div class="div3"> <div>1</div> <div>2</div> <div>3</div> </div>
css
/* white-sapce: nowrap 能减少一层DOM*/ .div3 { white-space: nowrap; overflow: hidden; } .div3 > div { width: 200px; display: inline-block; border: 1px solid blue; }