0

私のメトロアプリでは、画像（最初の行）と画像の下に2つのボタン（次の行を意味します）を使用してホームページを作成しようとしています。最初のボタン[その他]は画面の左側にあり、[再生]は画面の左側にあります。画面の右側の2行目にあります。

画面の上部90％（高さ）を画像で覆い（幅は画面全体を左から右に）、残りの10％（画面の下部に表示）にはこれら2つのボタンのみを配置する必要があります。

誰かがこのためのHTMLコードを手伝ってくれますか？

画像の表示用とボタン用の2つの区分を使用しようとしていました。しかし、現在は画像のみでページ全体が表示されており、画像の半分しか表示されていません。

<div style="height:60%;" >
    <img src="images/games.jpg" style="width:100%;" />
</div> 

<div style="vertical-align:bottom;background-color:orange;grid-cell-stacking:columns;margin:4px;padding-bottom:2px;padding-top:40%;padding-left:60%">
    <input type="button" id="btnMore" name="Mute" value="More"  />
    <input type="button" id="btnPlay" name="Play" value="Play" />
</div>
4

2 に答える 2

1

これは、新しい -ms-grid レイアウト タイプが必要なもののようです。

<div class="mainGrid">
  <img class="mainimage" src="yourImage.jpg"/>
  <div class="button1">Your Button 1</div>
  <div class="button2">Your button 2</div>
</div>

そしてCSS：

.mainGrid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: 90fr 10fr;
 }
 .mainImage {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
   -ms-grid-column-span: 2;
   width: 100%;
   height: 100%;
 }
 .button1 {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     -ms-grid-column-align: start;
 }
 .button2 {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     -ms-grid-column-align: end;
 }

CSS グリッド サポートの詳細については、http: //msdn.microsoft.com/en-us/library/ie/hh673533 (v=vs.85).aspx を参照してください。

これは進行中の標準です (Webkit は現在それを実装していると思います)。

于 2012-07-21T17:12:15.940 に答える
0

これはどうですか？

http://jsfiddle.net/nT3eB/

画像を引き伸ばしたいと思うことは想像できます。

HTML:

<html><head><title>Title</title></head>
<body>
    <div id="container">
        <div id="imageSection"></div>
        <div id="buttonSection">
            <input type="button" id="btnMore" name="Mute" value="More" />
            <input type="button" id="btnPlay" name="Play" value="Play" />    
        </div>
    </div>
</body>
</html>​

そしてCSS：

html, body, #container {
    width: 100%;
    height: 100%;
}

#imageSection {
    height: 90%;
    background-image: url(../images/games.jpg);
}

#buttonSection {
    height: 10%;
    width: 100%;
    background-color:orange;
}

#btnMore,
#btnPlay {
    height: 100%;
    width: 50%;
    float: left;
}
​
于 2012-07-21T12:35:22.067 に答える