web-dev-qa-db-ja.com

CSSの最小幅プロパティが機能していません

次の問題があります。
他の要素を含むdivがあり、その幅をコンテンツに依存させようとしています。このdivの最大幅も制限します。私が使う min-widthおよびmax-widthはCSSですが、min-width 動かない。 divの幅は常にmax-width値、コンテンツが何であっても。

例：

ホワイトdiv（メインdiv、私が話していた）をその中にあるフォームの周りに厳密に囲み、左右に空きスペースがないようにします。フォームスタイルmax-width:500pxコンテンツが小さい場合でも、メインdivは同じままであることを示します。

[〜＃〜] html [〜＃〜]

<div class="gInnerBox sInnerBoxMain">
    <form style="max-width:500px; margin-left: auto; margin-right: auto">            
        <div id='content'>
                   <!-- CONTENT -->
        </div>
    </form>
</div>

[〜＃〜] css [〜＃〜]

.gInnerBox{
    position: relative;
    background-color: #fff;
    opacity: 0.9;
    padding: 10px 10px 10px 10px;    

    box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    border: 1px solid #000;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.sInnerBoxMain{
    max-width: 1000px;
    min-width: 500px;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
}

Example
（ソース： wstaw.org ）

htmlcsspositioning
23
vizzdoom

デフォルトでは、ブロックレベルの要素は可能な限り幅いっぱいに拡張されます。したがって、その幅は基本的に「100％」（種類）であり、最大1000ピクセルと言っているので、最大1000ピクセルまで拡大しています。最小幅はまだ達成されています（少なくとも500ピクセルです）。要素にdisplay: inline-blockを設定してみて、それが役に立つかどうかを確認してください。これにより、最小幅と最大幅に注意を払いながら、コンテンツまで拡張するだけです。残りのコンテンツをインラインに適応させるには、ブレーカー<br />を追加する必要がある場合があります。

32
animuson