gpt4 book ai didi

html - 3 列 css 模板,右列的位置不正确

转载 作者:太空宇宙 更新时间:2023-11-03 21:53:43 24 4
gpt4 key购买 nike

我正在尝试做一个简单的 3 列模板

这是我的 CSS 代码:

#page {
padding: 0px;
height: 100%;
width: 900px;
margin-right: auto;
margin-left: auto;
float: none;
margin-top: 0px;
margin-bottom: 0px;
}

#header {
height: 250px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#right-column {
float: right;
width: 200px;
}
#left-column {
float: left;
width: 200px;
}
#center-column {
width: 490px;
margin-right: auto;
margin-left: auto;
}

然后是我的 HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title></head>

<body>
<div id="page">
<div id="header">
<img src="header.png" width="900" height="250" />
</div>
<div id="page-content">
<div id="left-column">Content for id "left-column" Goes Here</div>
<div id="center-column">Content for id "center-column" Goes Here</div>
<div id="right-column">Content for id "right-column" Goes Here</div>
</div>
</div>
</body>
</html>

我得到的是:

Output

问题是:为什么我的右栏顶部有这个“边距”?左列和中列的制作方式与中右列相同,但右列有这个“边距”,我该如何解决?

最佳答案

所有列都应该像这样向左浮动:

#right-column {
float: left;
width: 200px;
}
#left-column {
float: left;
width: 200px;

}
#center-column {
width: 490px;
float:left;
}

查看此 fiddle .

如果您希望页面内容高度适合 float 内容的大小,您应该使用 clearfix , 请参阅 here再举个例子。

关于html - 3 列 css 模板,右列的位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15419403/

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