Question

jsFiddle显示的所有内容都看起来很好，但是如果你在LOGIN SECTION框中添加足够的文本，为了使文本分成多行，它会推动外部2个标题块不对齐。看起来如果我在中间框中添加文本，外框似乎会下降到文本结束的行。 I.E - 对多行重复“登录部分”，然后将外框向下推。

链接到正确的jsFiddle - http://jsfiddle.net/d7xXB/

HTML

<body>
<div class="wrapper">
<div class="headerblock">Logo 1 Here</div>
<div class="headerblockmiddle">Login Section Login Section Login Section Login Section Login Section</div>
<div class="headerblock">Logo 2 Here</div>
</div>
</body>

CSS

* {
margin: 0;
padding: 0;
}
.wrapper {
-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:800px;
min-height:550px;
margin-left: auto;
margin-right: auto;
background-color:#FFF;
margin-top:10px;
padding: 5px;
position:relative;
display:block;
text-align:center;
}
body {
background-color: #2a8dba;
}
.headerblock {
position: relative;
margin: 0 auto;
display:inline-block;
height: 85px;
width: 200px;
background-color:#CCC;
padding: 0px;
/* For IE 7 */
zoom: 1;
*display: inline;
}
.headerblockmiddle {
position: relative;
margin: 0 auto;
display:inline-block;
height: 85px;
width: 370px;
background-color:#CCC;
padding: 0px;
/* For IE 7 */
zoom: 1;
*display: inline;
}

非常感谢任何帮助，谢谢。

Answer 1

将内联块元素的垂直对齐设置为顶部。

.headerblockmiddle {
    ...
    display:inline-block;
    vertical-align:top;
    ...
}

http://jsfiddle.net/d7xXB/2/

CSS显示：存在多行文本时，内联块错位

1 个答案: