divを使用する代わりにtable-tds

Question

divを持つデータ要素をtable-tdsを使用せずに処理する必要があります。私はブレークダウンせずにすべてのdivを1つずつ表示したい。 divがブラウザの端に接触すると、スクロールバーが表示されます。私にお勧めしますか？ リンクを確認してください - http://jsfiddle.net/VY978/

Answer 1

代わりfloatの。このように書く：

.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：あなたはwhite-spaceの組み合わせでdisplay:inline-blockを使用することができます

<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

が.mainBox {パディング：3px;ボーダー：2ピクセルソリッドブルー;オーバーフロー：スクロール;}

あなたのCSSでこれを試してみてください .content {width：100px; border：1px赤色; margin-top：2px; }