0

古いウェブサイトのメニューをモバイルフレンドリーに変更しようとしていますが、「メニュー要素」が小さな画面に表示される方法に問題があります。

メニューは 3 つの要素 (左、中央、右) で構成され、小さな画面では同じ順序で垂直に表示されます。

しかし、cssを使用して、中央がその位置を維持し、左右がその下に移動するような位置に配置できるかどうか、またはさらにトリックが必要かどうかを知りたいです。

それを達成する方法は？

http://img834.imageshack.us/img834/2203/menuuse.jpg

編集、私が遊んでいた単純化されたコードを追加しました：

<div id="header">

                    <div id="Bholder">
                        <div id="AButton"></div>
                        <div id="HButton"></div>    
                        <div id="CButton"></div>    
                    </div>

                </div>

CSS

#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;

}

#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}

#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}

#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;

}

@media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;

}
  }
4

1 に答える 1

0

左右の要素を右に、真ん中の要素を左に浮かせてみてください。次に、ラッパー要素の幅を各要素と同じサイズにして、視覚的に「ジグ」するようにします。

しかし、そうです、コードはメニューがどのように設定されているかを確認するのに役立ちます。

[編集]

@media only screen and (max-width: 767px){
    #Bholder{
        margin-left: auto;
        margin-right: auto;
        max-width: 250px;
        position: relative;
    }
    #AButton {
       position: absolute;
       top: 100px;
       left: 0;
    }
    #HButton {
       position: absolute;
       top: 0px;
       left: 0px;
    }
    #CButton {
       position: absolute;
       top: 200px;
       left: 0;
    }
}

注：私はそれを'sの代わりに<ul>withに貼り付けます。そして、私はあなたのcssに'sの代わりにクラスを使用します。<li>div#id

于 2013-01-14T19:33:42.710 に答える