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
追加された 編集された
ビュー: 3
源
ru fr es pt de ar
あなたのテーブルコンテナにも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
追加された
源