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