如何中心垂直浮動元素，包含元素結垢問題，IMG元素的大小問題

我試圖做一個簡單的遊戲，我碰到的一些問題，我似乎無法來解決：如何中心垂直浮動元素，包含元素結垢問題，IMG元素的大小問題

我無法居中垂直浮動元素（.stat和.clickable）。
所有元素的總高度應該完全符合屏幕高度，但它超出了屏幕高度。（在我的屏幕上，它們看起來在32％或29％處相同，但是在30％上面的一個稍微更寬（並且有點模糊））右邊框）。
img元素的height屬性沒有效果。

這裏是我的代碼（圖像是450個像素寬的正方形）：

* { 
 
    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>

來源

2017-01-16 Catipalist

浮動和定心相當互斥的。如果你想要中心元素，然後使用display：inline（-block）而不是浮動來讓它們「在同一行上」。 – CBroe

我不知道你的意思是你的第一個問題是什麼。不過，我可以幫你解決第二個問題。我對你的代碼做了一些小的修改，但是我沒有這個圖像。看下面的代碼。遊戲容器現在被設置爲最大高度：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%; 
 
}

。對於第三個問題，我們沒有圖像...... 對於高度屬性嘗試顯示：塊;然後沒有寬度。

來源

2017-01-16 15:33:29

在這種情況下，您可以充分利用flexbox（請注意，滾動是由代碼段的視口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>

來源

2017-01-16 15:44:25 Syden

請檢查該代碼。我解決你的問題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>

來源

2017-01-16 15:55:17 Rahul

如何中心垂直浮動元素，包含元素結垢問題，IMG元素的大小問題

回答

相關問題