橫向滾動布局 white-space:nowrap
阿新 • • 發佈:2019-03-26
pac 布局 clas dom tro border lin inline 橫向滾動
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; }
橫向滾動布局 white-space:nowrap