0

コンテンツが中央に配置された Web ページがあります。ブラウザ ウィンドウのサイズを変更すると、ウィンドウの幅がページ コンテンツよりも小さくなる可能性があります。この場合、ページ コンテンツは中央揃えではなく、左揃えになります。中央に表示するスペースがない場合、右揃えにする方法はありますか?

更新: 主な目標は、ウィンドウの幅が十分でない場合に、ページの右側を表示し続けることです。のようなもの: 右にスクロールしますが、コードはありません。サイズを変更すると、コードがいくつかの厄介なジャンプを行います。

4

2 に答える 2

2

コンテナに最小幅を設定し、ウィンドウが小さくなったときにメディアクエリを使用して開始します...

#my_div { margin: 0 auto; text-align: center; min-width: 900px; background: #999; }
@media all and (max-width: 899px){
    #my_div { text-align: right; background: red; min-width: auto; }
    #my_div #tableWrapper { overflow: auto; }
}

このコードtext-alignのタグの は必要ありません。bodyウィンドウが小さくなったときにコンテンツのサイズを変更したくない場合は、メディア クエリ内のルールmin-width: autoから削除します。#my_div

例: http://jsfiddle.net/NXdYk/2/

編集：

テーブルを別の div でラップしoverflow: auto、ウィンドウが狭くなりすぎた場合にスクロールできるように設定できます。

http://jsfiddle.net/NXdYk/6/

しかし、テーブルがプライマリ レイアウトであり、幅が明示的に設定されている場合 (つまり、インライン CSS)、これは次善のソリューションです。結論: 人々がサイトとどのようにやり取りするかを制御することはできません。できることは、それに応じて計画を立てることだけです。

于 2013-05-09T07:46:39.203 に答える
0

これがあなたが探しているものである場合の簡単な例です.jsスクリプトはそれを機能させます.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(window).resize(function() {
                if($(window).width() < $('#content').width()) {
                    $('#content').addClass('fr');
                } else {
                    $('#content').removeClass('fr');
                }
            });
        </script>
        <style type="text/css">
            #content{
                text-align: center;
                min-width: 500px ;
                margin: auto;
                border: 1px solid #000;
            }

            .fl{
                float: right;
            }
        </style>
        <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
    </head>
    <body>
        <div id="content">something</div>
    </body>
</html>
于 2013-05-09T08:08:30.830 に答える