2

<div>次の条件を満たすように、コンテナ タグをページの中央に配置したいと考えています。

  1. 画面幅が の最大幅よりも大きい場合、を画面内で水平方向に中央揃えにし<div>たいと考えています。<div>
  2. <div>画面幅がの最大幅と等しい場合、 は画面<div>全体を埋める必要があります。
  3. 画面の幅が<div>の最大幅よりも小さい場合、 は画面<div>の幅に合わせてサイズ変更する必要があります。

これは CSS のみで可能ですか、それともこの種の柔軟性を実現するには JavaScript を使用する必要がありますか?

4

3 に答える 3

4

これは CSS のみで可能ですか、それともこの種の柔軟性を実現するには JavaScript を使用する必要がありますか?

それは非常に可能です。

どのように？

ここで重要なのは、CSSmax-widthプロパティmargin: 0 auto;とセンタリングです。

これはかなりよくコメントされた jsFiddle: little linkです。

HTML:

<div class = "inner">

</div>

CSS:

.inner {
    margin: 0 auto; /*makes sure the div is centered*/
    max-width: 300px; /*maximum width*/
    width: 100%; /*default*/
    height: 100px; /*just for clarity*/
    background: dodgerblue; /*prettiness*/
}

@Cerbrusがコメントで述べたように、実際margin: 0 auto;にも設定margin-topされます。したがって、 に別の値をmargin-top使用する場合は、代わりに次を使用します。

margin-left: auto;
margin-right: auto;
于 2012-11-26T09:13:21.983 に答える
0

これにより、div がid='myDiv'600px 未満の画面で幅 100% に拡大されます。それ以外の場合は中央に配置されます。

#myDiv{
    width:600px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width 600px) {
    #myDiv{
        width:100%;
    }
}
于 2012-11-26T09:12:26.760 に答える
0

この例を参照してください-

<div id="container"></div>​

CSS-

#container
{
   margin-left:auto;
   margin-right:auto;
   height:500px;
   max-width:400px;
   background-color:yellow;
   min-width:100px;  //ensures that your div will resize to match the width of the screen
}​

ここで動作するデモを参照してください - http://jsfiddle.net/UgxZe/4/

必要な 3 つのシナリオすべてを確認できます。

于 2012-11-26T10:08:54.237 に答える