0

我正在尝试做一个简单的 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>

我得到的是：

输出

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

4

3 回答 3

2

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

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

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

看到这个小提琴。

如果您希望页面内容的高度适合浮动内容的大小，则应使用clearfix，请参阅此处以获取另一个示例。

于 2013-03-14T20:24:36.123 回答
1

您的右栏没有实际的边距空间。它是向右浮动的，但中心列上的边距空间使您的列总宽度大于 100%。

一个简单的解决方案是浮动所有剩余的东西。确保您的容器足够宽以适合 890 像素宽。

试试这个...

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

完成这项工作后，下一步就是开始使用 % 宽度和 % 边距，以使您的模板具有响应性。这允许您的站点根据查看它的设备的宽度进行缩放。

只要确保您的总宽度永远不会超过 100%，否则您的列将不会嵌套到正确的位置。

于 2013-03-14T20:25:10.087 回答
1

添加float:left到中间列。

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

真的你应该float:left;所有的列，clear:both然后

于 2013-03-14T20:25:11.870 回答