添加一個按鈕元素會改變它所在div的位置？

我有一個基本的佈局，包含6個動態大小的內容面板，排列成兩行三列。添加一個按鈕元素會改變它所在div的位置？

面板爲<div>'s，寬度爲26％，邊距爲2％，display:inline-block;。

它們均勻分佈且看起來正確，但一旦我添加一個<button>元素，第一行和第二列中的框向上移動大約20個像素。

任何想法？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Test Client</title> 
    <link rel='stylesheet' type='text/css' href='CSS/Main.css' /> 
    <script src="JavaScript/Main.js"> 
    </script> 
</head> 
<body onload="Main.onLoad();"> 
    <div class="panel"> 
     <h3>content</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
    <div class="panel"> 
     <h3>content</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
    <div class="panel"> 
     <h3>content</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
    <div class="panel"> 
     <h3>content</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
    <div class="panel"> 
     <h3>content</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
    <div class="panel"> 
     <h3>concent</h3> 
     <div class="innerContainer" id=""> 
     </div> 
    </div> 
</body> 
</html>

CSS：

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

body { 
    margin: 0; 
    padding: 0; 
    background-color: rgb(227, 111, 30); 
    height: 100%; 
} 

.innerContainer { 
    margin:0; 
    padding:0; 
    width:100%; 
} 

.panel { 
    display: inline-block; 
    clear:none; 
    width: 26%; 
    height: 41%; 
    margin: 2%; 
    padding: 30px; 
    border: 2px solid black; 
    box-shadow: 10px 10px 5px #888888; 
    -moz-border-radius: 40px; 
    -webkit-border-radius: 40px; 
    border-radius: 40px; /* future proofing */ 
    -khtml-border-radius: 40px; /* for old Konqueror browsers */ 
    background-color: white; 
} 

.panel h3 { 
    text-align: center; 
    text-transform: uppercase; 
    padding:0; 
    margin:0; 
    clear:both; 
} 

.panel button { 
}

來源

2014-06-09 user3722952

在這裏發佈您的HTML和CSS，所以我們可以看到問題是什麼。另外JSFiddle也會有幫助。 – TylerH

您需要在''.panel'類中添加'vertical-align：top'。 –

@Paulie_D這樣做，謝謝。我還不太擅長CSS：P – user3722952

嘗試使用vertical-align:top。看到這個搗鼓一個工作示例：http://jsfiddle.net/dxGsN/1/

所以你的CSS是：

.panel { 
    display: inline-block; 
    clear:none; 
    width: 26%; 
    height: 41%; 
    margin: 2%; 
    padding: 30px; 
    border: 2px solid black; 
    box-shadow: 10px 10px 5px #888888; 
    -moz-border-radius: 40px; 
    -webkit-border-radius: 40px; 
    border-radius: 40px; /* future proofing */ 
    -khtml-border-radius: 40px; /* for old Konqueror browsers */ 
    background-color: white; 
    /*ADD THIS LINE*/ 
    vertical-align:top; 
}

或者，你可以使用float:left，而不是display:inline-block。看到這個小提琴：http://jsfiddle.net/dxGsN/2/

display: block; 
float: left;

來源

2014-06-09 15:54:59 AndrewPolland

添加一個按鈕元素會改變它所在div的位置？

回答

相關問題