添加一个按钮元素会改变它所在的 div 的位置吗？答案

【问题标题】：Adding a button element changes the position of the div it is in?添加一个按钮元素会改变它所在的 div 的位置吗？
【发布时间】：2014-07-30 04:44:06
【问题描述】：

我有一个基本布局，其中包含 6 个动态大小的内容面板，按两行三列排列。

面板是 <div> 的，宽度设置为 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 {
}

【问题讨论】：

在此处发布您的 HTML 和 CSS，以便我们了解问题所在。 JSFiddle 也会有所帮助。
您需要将vertical-align:top 添加到您的.panel 类中。
@Paulie_D 成功了，谢谢。我还不太擅长 CSS :P
@Paulie_D 请将其作为答案发布！！

标签： javascript html css

【解决方案1】：

尝试使用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;

【讨论】：