1

基本的な質問は次のとおりです。要素自体に他の要素が含まれているときに、要素に合わせて縮小するにはどうすればよいでしょうか。

目標は、(中央に配置された) 画像の上に (中央に配置された) メニューを表示することです。幅と高さは、画像の寸法に関連します。すべてレスポンシブです。つまり、絶対的なサイズはありません。

サンプルコードは次のとおりです。

<div id="menu">
    <img src="picture.jpg" />
    <div id="left">
        test1
    </div>
    <div id="right">
        test2
    </div>
</div>

#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}

#menu img{
height: 90%;
position:relative;
}

#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}

#clear{
clear: both;
}

#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}

これは次のようになります。

____________________________________
|                                  |
|  ------------------------------  |
|  |                            |  |
|  |     p i c t u r e          |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |    left <button> right     |  |
|  |                            |  |
|  ------------------------------  |
|                                  |
------------------------------------

画像の高さと幅の比率は常に同じです。ただし、合計サイズはユーザーのウィンドウによって異なります。

「メニュー」divをラップして「左」と「右」のdivを同時に配置することができません。

これは可能ですか？ブラウザの互換性についてはまだ話していません...

4

1 に答える 1

1

これが機能するかどうかを確認してください：http://jsfiddle.net/sdvnh/1/

変更点:

#menu {
display: block;
}

#menu img{
height: 90%;
width: 90%;
}
于 2012-05-23T20:50:16.093 に答える