2

正如 jsFiddle 所示，一切看起来和工作正常，但是如果您向 LOGIN SECTION 框中添加足够的文本，以使文本分成多行，它会将外部 2 个标题块推到不对齐的位置。看起来好像我在中心框中添加了文本，外部框似乎下降到文本结束的行。IE - 使“登录部分”重复多行，并将外框向下推。

链接到正确的 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;
}

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

4

1 回答 1

9

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

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

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

于 2013-06-19T22:30:52.120 回答