2017-01-16 19 views
1

をどのように縦に浮かべ要素を中央に、スケーリングの要素を持つ問題サイズ:、IMG要素は、私は簡単なゲームを作るしようとしている、と私は私が解決するように見えることはできませんいくつかの問題に実行した問題

  1. 縦に浮かせた要素(.stat.clickable)を中央に置くことはできません。

  2. すべての要素の高さの合計は画面の高さに正確に収まる必要がありますが、それを超えています。

  3. 画像は値に応じて幅が少し異なります(私の画面では32%または29%で同じに見えますが、30%上の方がわずかに広い(そして少しぼやけています) )。

  4. img要素のHeightプロパティは無効です。

は、ここで(画像は450px幅の正方形で)私のコードです:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e6e6e6; 
 
} 
 
.statsBar, 
 
.buttons { 
 
    color: #333333; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    text-transform: uppercase; 
 
    background-color: #bfbfbf; 
 
    height: 13%; 
 
} 
 
#score { 
 
    float: left; 
 
    margin-left: 5%; 
 
} 
 
#hp { 
 
    float: right; 
 
    margin-right: 5%; 
 
} 
 
.stats:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.clickable { 
 
    float: left; 
 
    width: 29.33%; 
 
    margin: 1%; 
 
    padding: 1%; 
 
    background: #f2f2f2; 
 
} 
 
.game { 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    margin: auto; 
 
    background-color: #999999; 
 
} 
 
img { 
 
    width: 32%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
#enemyHand { 
 
    transform: rotate(180deg); 
 
    margin-top: 5%; 
 
} 
 
#playerHand { 
 
    margin-bottom: 5%; 
 
}
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script type="text/javascript" src='game.js'></script> 
 
</head> 
 

 
<body> 
 
    <div class="game"> 
 
    <div class="statsBar"> 
 
     <p id="score" class="stat">score: 0</p> 
 
     <p id="hp" class="stat">hp: 3</p> 
 
    </div> 
 

 
    <div class="hands"> 
 
     <img id="enemyHand" src="paper.png"> 
 
     <img id="playerHand" src="scissors.png"> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a> 
 
     <a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a> 
 
     <a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+1

フローティングと心ではなく、相互に排他的です。要素を中央揃えにしたい場合は、浮動小数点の代わりにdisplay:inline(-block)を使用して、 "同じ行に"取得します。 – CBroe

答えて

0

私はあなたがあなたの最初の質問で何を意味するのか分かりません。しかし、私は2番目のお手伝いができます。あなたのコードを少し変更しましたが、イメージはありません。コードを見てください。ゲームコンテナがmax-height:100%に設定されました。高さ:100vh。それは助けるべきである。 (100VHは、穴のページを意味し、私はまた、身体のオーバーフローを作った:。。隠された;,私はスクロールする必要がないと思うので、私はページの下部にボタンコンテナを作っ

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e6e6e6; 
 
    overflow:hidden; 
 
} 
 
.statsBar, 
 
.buttons { 
 
    color: #333333; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    text-transform: uppercase; 
 
    background-color: #bfbfbf; 
 
    height: 13%; 
 
} 
 
.buttons { 
 
    bottom: 0; 
 
    clear:both; 
 
} 
 
#score { 
 
    float: left; 
 
    margin-left: 5%; 
 
} 
 
#hp { 
 
    float: right; 
 
    margin-right: 5%; 
 
} 
 
.stats:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.clickable { 
 
    float: left; 
 
    width: 29.33%; 
 
    margin: 1%; 
 
    padding: 1%; 
 
    background: #f2f2f2; 
 
} 
 
.game { 
 
    width: 50%; 
 
    max-height: 100%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    margin: auto; 
 
    background-color: #999999; 
 
} 
 
img { 
 
    height: 50%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
#enemyHand { 
 
    transform: rotate(180deg); 
 
    margin-top: 5%; 
 
} 
 
#playerHand { 
 
    margin-bottom: 5%; 
 
}

。 3番目の質問については、画像がありません... 高さのプロパティについては、ブロックを表示し、幅がない場合は正常に機能することを確認してください。

0

この場合、フレックスボックスを利用することができます(スクロールはスニペットのビューポートheightによって生成され、理想的にはオーバフローしないことに注意してください)、もしそうであればoverflow: autoがそれを処理するように設定されていますあなたの利益は):

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e6e6e6; 
 
} 
 
.statsBar, 
 
.buttons { 
 
    color: #333333; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    text-transform: uppercase; 
 
    background-color: #bfbfbf; 
 
    height: 13%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 
.hands { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    /* comment if content will never overflow */ 
 
    overflow-x: auto; 
 
} 
 
.buttons { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.clickable { 
 
    float: left; 
 
    width: 29.33%; 
 
    margin: 1%; 
 
    padding: 1%; 
 
    background: #f2f2f2; 
 
} 
 
.game { 
 
    width: 50%; 
 
    height: 100%; 
 
    /*text-align: center;*/ 
 
    margin: auto; 
 
    background-color: #999999; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
} 
 
img { 
 
    width: 32%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
/*#score { 
 
    float: left; 
 
    margin-left: 5%; 
 
}*/ 
 

 
/*#hp { 
 
    float: right; 
 
    margin-right: 5%; 
 
}*/ 
 

 
/*.stats:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}*/ 
 

 
/*#enemyHand { 
 
    transform: rotate(180deg); 
 
    margin-top: 5%; 
 
}*/ 
 

 
/*#playerHand { 
 
    margin-bottom: 5%; 
 
}*/
<div class="game"> 
 
    <div class="statsBar"> 
 
    <p id="score" class="stat">score: 0</p> 
 
    <p id="hp" class="stat">hp: 3</p> 
 
    </div> 
 
    <div class="hands"> 
 
    <img id="enemyHand" src="paper.png"> 
 
    <img id="playerHand" src="scissors.png"> 
 
    </div> 
 
    <div class="buttons"> 
 
    <a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a> 
 
    <a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a> 
 
    <a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a> 
 
    </div> 
 
</div>

0

このコードを確認してください。私はあなたの質問1と2を解決する。私はあなたのイメージの問題について理解していない。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #e6e6e6; 
 
} 
 
.statsBar, 
 
.buttons { 
 
    display: table; 
 
    color: #333333; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
    text-transform: uppercase; 
 
    background-color: #bfbfbf; 
 
    height: 13%; 
 
    width: 100%; 
 
} 
 
#score, 
 
#hp{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
#score { 
 
    /*float: left; 
 
    margin-left: 5%;*/ 
 
    text-align: left; 
 
} 
 
#hp { 
 
    /*float: right; 
 
    margin-right: 5%;*/ 
 
    text-align: right; 
 
} 
 
.stats:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.clickable { 
 
    /*float: left;*/ /*Float sould not use here */ 
 
    display: table-cell; 
 
    width: 29.33%; 
 
    /*margin: 1%; 
 
    padding: 1%;*/ 
 
    border: 5px solid #bfbfbf; 
 
    vertical-align: middle; 
 
    background: #f2f2f2; 
 
} 
 
.game { 
 
    width: 50%; 
 
    height: 100%; 
 
    text-align: center; 
 
    margin: auto; 
 
    background-color: #999999; 
 
} 
 
img { 
 
    width: 32%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 
#enemyHand { 
 
    transform: rotate(180deg); 
 
    margin-top: 5%; 
 
} 
 
#playerHand { 
 
    margin-bottom: 5%; 
 
}
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script type="text/javascript" src='game.js'></script> 
 
</head> 
 

 
<body> 
 
    <div class="game"> 
 
    <div class="statsBar"> 
 
     <p id="score" class="stat">score: 0</p> 
 
     <p id="hp" class="stat">hp: 3</p> 
 
    </div> 
 

 
    <div class="hands"> 
 
     <img id="enemyHand" src="http://placehold.it/450x450"> 
 
     <img id="playerHand" src="http://placehold.it/450x450"> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a> 
 
     <a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a> 
 
     <a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

関連する問題