CSSの幅:自動変な奇妙な

divの幅を 'auto'に設定しています。ページをリフレッシュすると、divの幅が非常に広く、画面から離れます。私はdiffの画面サイズに対応しなければならないので、このdivの明示的な幅を設定することはできません。

なぜこのようなことが起こるのか?

Edit > My code as requested:

CSS:

.table{
max-width: 100%;
height: 250px;
background-color: #ffffff;
border: 2px solid #ccc;
overflow: auto;
white-space: nowrap;
margin-top: 20px;   
}

HTML:

<div class="table" id="MedeLogSearchTable"></div>
0
あなたのテーブルコンテナにもCSSを投稿してください。
追加された 著者 Andres Ilich,

3 答え

width:auto is the default value for width of a div, what you want to do is add a percentage value instead.

2
追加された
こんにちはアンドレス。私は幅を試しました:100%...しかし、問題はまだ残っています。
追加された 著者 Tiwaz89,
CSSファイルを参照するのではなく、インラインスタイルを設定するとうまくいくのでしょうか?
追加された 著者 Tiwaz89,
私は速くそれを試してみましょうし、私のコードを投稿する場合は、覚えていない
追加された 著者 Tiwaz89,
@DeanGroblerどちらかの方法で動作するはずですが、CSSのdivを参照する方が意味があります。 max-width:100%; を試してください。何も起こらない場合はコードを投稿してください。
追加された 著者 Andres Ilich,
@DeanGroblerはあなたのコードを投稿して見ています。
追加された 著者 Andres Ilich,

divの幅が width:auto (デフォルト値)で画面外に出る場合は、おそらくdivのが画面よりも広いことを意味します。

1
追加された

親divのような親タグを position:relative または position:absolute として配置し、最後のdivを相対位置として指定してみます。また、Explorer以外のブラウザでページをテストしてください。 Firefox、Chrome、Safariなどです。 Firefox、Chrome、およびIEのプラグイン市場に存在するFirebug拡張機能を使用して、可能であればコードをデバッグしてください。

試す

シンプルな構造の例:

<div id="container">
    <div id="leftmenu">LEFT</div>
    <div id="content">
        <div class="table" id="MedeLogSearchTable">
            <table width="100%" border="1">
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
            </table>
        </div>
    </div>
</div>

とCSS:

#container {
    max-width: 1600px;/* a max-width may be desirable to keep this layout
        from getting too wide on a large monitor. */
    min-width: 600px;/* a min-width may be desirable to keep this layout
        from getting too narrow.  */
    background: #FFF;
}

#leftmenu {
    float: left;
    width: 20%;
}
#content {
    width: 80%;
    float: left;
}

.table {
        width: 100% ;
        max-width: 100%;
        height: 250px;
        background-color: #ffffff;
        border: 2px solid #ccc;
        overflow: auto;
        white-space: nowrap;
        margin-top: 20px;   
}
1
追加された