divs而不是使用table-tds

Question

我需要使用div的數據元素而不使用table-tds。我想在不中斷的情況下逐個顯示所有div。如果div觸及瀏覽器邊緣，滾動條應該出現。你能建議我嗎？ 請檢查鏈接 - http://jsfiddle.net/VY978/

Answer 1

相反float，你可以用display:inline-block與white-space的組合。像這樣寫：

.mainBox{padding:3px;border:2px solid blue;overflow:hidden;white-space:nowrap;} 
.content{ 
    width:100px; 
    border:1px solid red; 
    display:inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    white-space:normal; 
    vertical-align:top; 
} 

入住這http://jsfiddle.net/VY978/4/

Answer 2

請參閱here。

CSS：

.mainBox{padding:3px;border:2px solid blue;overflow:scroll;white-space: nowrap;} 
.content{width:100px;border:1px solid red;display:inline-block;}​ 

HTML：

<div class="mainBox"> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
    <div class="content">yes</div> 
</div>​ 

Answer 3

試試這個在你的CSS

.mainBox {填充：3px的;邊界：2px的固體藍色;溢出：滾動;} 。內容{width：100px; border：1px solid red; margin-top：2px; }