スクロールせずに浮動小数点数を返します

私は、互いに浮かべた一連の列をすべて作成しています。私は、列がコンテナよりも大きいときに、横のスクロールバーが列の代わりに表示されるようにしたいと思います。ここではCSSでスクロールせずに浮動小数点数を返します

<body> 
    <div id="container"> 
    <div id="col1" class="col">Column One</div> 
    <div id="col2" class="col">Column Two</div> 
    ... 
    </div> 
</body>

...私が持っているものです。

body { width: 100%; height: 100%; overflow: auto; } 
#container { width: 100%; height: 100%; } 
.col { float: left; width: 250px; height: 100%; }

私は理想的なページが列に過ぎないので、ページ/身体レベルでのスクロールバーを持っていると思います。

出典

2012-03-08 Fluidbyte

CSSでは「コンテナ」のスペルが間違っていますが、HTMLでは正しくありません。 –

私の元のコードは正しいです。ちょうど間違ってここに入力... – Fluidbyte

それはこのCSSで動作します：

#container { width: 100%; overflow: auto; white-space: nowrap; } 
.col { display: inline-block; width: 250px; }

注意：ディスプレイブロックはIE < = 7

に取り組んでいない他のソリューションには、二つの容器を使用しての幅を修正することです2列目の合計幅：

#container1 { width: 100%; overflow: auto; white-space: nowrap; } 
#container2 { width: 1250px; } 
.col { float:left; width: 250px; } 

<div id="container1"> 
    <div id="container2"> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div> 
    <div class="col">Column 3</div> 
    <div class="col">Column 4</div> 
    <div class="col">Column 5</div> 
    ... 
    </div> 
</div>

本文にスクロールバーが必要な場合は、オーバーフローを削除するだけです。#contai on auto nerと＃container1

出典

2012-03-08 18:51:17

浮動小数点数の代わりにインラインブロックを使用し、コンテナーのnowrapをきれいに処理しました。 IE <= 7の心配はありません。これはかなり制御されたアプリケーションです。ありがとう！ – Fluidbyte

容器と本体の幅を入れてください。それは問題を解決するはずです。

出典

2012-03-08 18:40:41

私はウィンドウのサイズを変更すると、まだ浮動小数点を削除しません。 – Fluidbyte

スクロールせずに浮動小数点数を返します

答えて

関連する問題