我在编写具有居中内容、简单图像标题、两列(导航和主要内容)以及最后一个页脚的 CSS 布局时遇到问题。
问题是我无法让导航/主要内容列保持大小(分别为 200 和 718 像素)并在操作浏览器窗口时保持页眉/页脚居中。
我已经尝试过各种类型的定位和容器， float 导航/主要列总是将它们从容器中分离出来。
有什么想法吗？
CSS:
body {
text-align: center;
margin: 0px 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: Tahoma, Arial, sans-serif;
}
.header {
max-width: 918px;
margin: 15px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
}
.nav {
display: inline;
width: 200px;
border-right: #111 solid 2px;
}
.main {
display: inline;
width: 700px;
}
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html:
<body>
<div class="header">header</div>
<div class="container">
<div class="nav">navigation</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>
</body>
最佳答案
试试这个:
.nav { display: inline-block; width: 200px; }
.main { display: inline-block; width: 700px; }
.container { display: block; width: 900px; margin: 0px auto; }
关于html - 简单的 CSS HTML 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21794562/