我有一个相当奇怪的行为<nav>
:
我的html很简单:
<div class="rounded screen defaultBg">
<header>
<img src="/img/logo-temp.png" alt="logo" width="185" height="88"/>
</header>
<nav>
Nav<br/>
Nav<br/> <!--Placeholder-->
Nav<br/>
Nav<br/>
Nav<br/>
Nav<br/>
Nav<br/>
Nav<br/>
Nav<br/>
Nav
</nav>
<div id="content">
...
</div>
<footer>...</footer>
</div>
相关的CSS是
nav {
display:table-cell;
width:200px;
}
#content {
display:table-cell;
width:80%;
}
.rounded {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.screen {
padding:3px;
display:table;
width:1000px;
margin:auto;
}
.screen header, .screen footer {
display:table-row;
text-align:center;
}
我发现的唯一解决方法是在 中指定.screen
宽度%
,但是,我的布局将特定于几个屏幕尺寸,因此我需要一个精确的像素值。谁能提供一些有关如何解决此问题的见解?