可変ボディ幅

3つの "列"（300px x 100％）を持つ単純なHTMLページがあり、すべてが垂直スクロールバーを持っています。これは、少なくとも900ピクセルの幅のウィンドウを持つときにうまく動作します。ただし、ウィンドウのサイズを列のサイズよりも小さくすると、列の1つ（またはそれ以上）がウィンドウを垂直に合わせるようにジャンプします。これは私が望むものではありません。なぜなら、ユーザーは他の列を見る前に完全にスクロールしなければならないからです。可変ボディ幅

私が望むのは、簡単です。ブラウザが適合しない場合でも、ブラウザが列を水平に合わせるように強制する方法です。本体のwidth: 900px;は、列の数（およびその幅）が可変であるため、使いたい解決策ではありません。

つまり、ブラウザに強制的に要素をページに水平に置き、要素の移動を停止させるにはどうすればよいですか？

[編集] 私の現在のコード（まあ、それは実際のコードではありませんが、それは問題が何であるかを示してい）：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style> 
      * { 
       margin: 0; 
       padding: 0; 
      } 

      body, html { 
       height: 100%; 
      } 

      body { 
       overflow-x: scroll; 
      } 

      .column { 
       width: 300px; 
       height: 100%; 
       float: left; 
       overflow-x: hidden; 
       overflow-y: scroll; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="column"></div> 
     <div class="column"></div> 
     <div class="column"></div> 
     <div class="column"></div> 
    </body> 
</html>

出典

2010-12-28 Tom van der Woerdt

水平方向に力を当てると、ブラウザに水平スクロールバーが表示されるはずです。 – JYelton

はい。既にそこにあります（ 'overflow-x：scroll'）が、実際にはページ上にカラムを水平に置くわけではありません。 –

サンプルタグにwhats not workingのタグを付けることができますか？ピクセルではなく、パーセンテージで幅を指定したいのですか？ –

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     * { margin: 0px; padding: 0px; } 

     body, html { height: 100%; } 

     body { 
     overflow-x: scroll; 
     white-space: nowrap; // prevent 'text' from wrapping 
     } 

     .column { 
     display:inline-block; // make them behave like 'text' 
     width: 300px; height: 100%; 

     overflow-x: hidden; overflow-y: scroll; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    </body> 
</html>

出典

2010-12-28 20:15:40 Jan

ありがとうございました！まだ列を混乱させていますが、それは修正できると確信しています。 :-) –

列に 'white-space：normal;'を設定してください。さもなければあなたのテキストはもうラップされません。 – zzzzBov

3「列」を持つ単一のコンテナにする必要がありますコンテナのCSSが 'nowrap'に設定されています

<div style='white-space: nowrap;'> 
    <div id='col1'></div> 
    <div id='col2'></div> 
    <div id='col3'></div> 
</div>

出典

2010-12-28 19:52:54

いいえ、これは動作しません。私のテキストはラップされますが、要素はそうしません。 –

私のコードを少し変更しました。 :-) –

はい、これは浮動小数点では機能しません。しかし、それは私の答えで私のようになった** + 1 ** – Jan

AFAIKセマンティックカラム（JavaScriptなし）を強制するクロスブラウザの方法はありません。

here私は同様の質問に答えました。

HTML：

<div class="parent"> 
    <div class="child">...</div> 
    <div class="child">...</div> 
    <div class="child">...</div> 
</div>

CSS

.parent 
{ 
    display: table-row; 
} 

.child 
{ 
    display: table-cell; 
    width: 300px; 
}

私はあなたがIEのためのJSを使用して手動でサイズと位置を設定する必要がありますので、IE < 9は、これで問題があると考えています。

出典

2010-12-28 19:54:04 zzzzBov

これはWebkit-onlyの問題ですので、クロスブラウザの問題は問題ありません。しかし、あなたのソリューションは動作していないようです。すべてのスクロールバーを列から削除するだけですが、隣り合わせには表示されません。 –

アイテムをフローティングしていないことを確認してください。 – zzzzBov

アイテムのフローティングを停止すると、列のサイズが変更されます。代わりにスクロールバーが必要です。 :-) –

答えて

関連する問題