gpt4 book ai didi

html - 简单的 CSS HTML 布局问题

转载 作者:行者123 更新时间:2023-11-28 11:15:16 25 4
gpt4 key购买 nike

我在编写具有居中内容、简单图像标题、两列(导航和主要内容)以及最后一个页脚的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com