html - 容器在 HTML/CSS 中的不同位置生成

Question

问题:当我在容器中输入文本时，它们会处于不同的位置(这不是我想要的)。当他们有相同数量的字符时，他们会处于相同的位置。否则你会看到 fiddle ，我的代码列在那里。

JSFIddle:http://jsfiddle.net/7Lsg4mj9/2/

CSS 代码:

body {
    background:#1a1a1a;
    color: black; font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif; }

.header {
    margin:0px auto;
    width:700px;
    height:150px;
    background: rgba(0,173,255,0.5);
    border:2px solid white;

} 

#header h1 {
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: white;
    margin:0px;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height:20px;
    letter-spacing:-2px;
    font-weight:bold; } 

#header h2 {
    font-family: Gill Sans, Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:2px;
    font-weight: bold; }

.container {
    display:inline-block;
    margin:0px auto;
    width:233px;
    height:480px;
    background: rgba(0,193,255,0.5);
    border-bottom: 20px solid rgba(255,255,255,0.4);
    border-top: 20px solid rgba(255,255,255,0.4);
    -webkit-transition: background-color 2s ease;
    transition: background-color 2s ease; }

.container:hover {
        background: rgba(0,153,155,0.5);

}

.container:hover span {
        color:red;

}

.container:hover span{
     -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 500ms; }

#container h1 {
    margin-top:-15px;
    text-align:center;
    font-family: Gill Sans, Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:2px;
    font-weight: bold; }

.footer {
    border:2px solid white;
    margin:0px auto;
    width:700px;
    height:75px;
    background: rgba(0,193,255,0.5);
    font-family: Gill Sans, Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:2px;
    font-weight: bold;

}

添加一些额外的字符以绕过

Answer 1

inline-block 元素的默认垂直对齐方式是baseline。将 vertical-align:top; 应用于您的容器以获得所需的结果。

.container {
display:inline-block;
margin:0px auto;
width:233px;
height:480px;
background: rgba(0,193,255,0.5);
border-bottom: 20px solid rgba(255,255,255,0.4);
border-top: 20px solid rgba(255,255,255,0.4);
float:center;
-webkit-transition: background-color 2s ease;
transition: background-color 2s ease;
vertical-align:top;
}

DEMO