Question

问题：当我在容器中输入文本时，它们处于不同的位置。当他们有相同数量的字符时，他们会处于相同的位置。否则你会看到小提琴。

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

Answer 2

$Routing_id($Order_id)不存在。我认为您需要更改为float:center并将“clear：both”添加到您的页脚。更新了小提琴：http://jsfiddle.net/g6uhupc6/

容器在HTML / CSS中产生不同的位置

2 个答案: