0

我需要创建一个包含三列的页脚。下面的代码给出了第二张图片而不是第一张；

<footer>
    <div id=”footer_links”&gt; </div>
    <div id=”values”&gt;.....</div>
    <div id=”contacts”&gt;.....</div>
    <div id="copyright">.....</div>
</footer>

CSS 代码：

footer{
 height: auto;
 padding:1px 15px 1px 20px;
 clear:both;
 }
#footer_links{
float:left;
}
#values{
 float:none;
 padding:0 600px 0 0;
 text-align:justify;
 }
#contacts{
float: right;

}

#copyright{
float:none;
text-align:center;
}

在此处输入图像描述

在此处输入图像描述

如何让我的 div 正确排列而不是像第二个示例中那样偏移？

4

4 回答 4

6

您可以使用CSS3 多列。

div#multicolumns {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

请参阅链接以获取预览和文档。

于 2012-09-17T17:16:00.330 回答
4

这是与您想要的结构相似的结构。但仍然不确定您在寻找什么。或者问题到底是什么..

HTML

<footer>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div id="meta-links"></div>
</footer>​

CSS

footer {
  width:100%;
  background-color:#CCC;
  min-height:100px;    
}

.column {
  width:30.5%;
  background-color:#333;
  height:100px;
  float:left;
  margin:0 10px;
}

#meta-links {
 width:100%;
 background-color:red;
 float:left;   
 height:20px;
}

小提琴：

http://jsfiddle.net/eYKsm/13/

​</p>

根据您的编辑进行更新：

我要做的第一件事是改变你的填充。我要尝试的第二件事是将列向左浮动......例如......

footer {
 height: auto;
 padding:1px 15px;
 width:520px;
 }
#footer_links{
 float:left;
 width:150px;  
 border:1px solid #CCC;
 padding:10px;
}
#values {
 width:150px;        
 float:left;
 text-align:justify;
 border:1px solid #CCC;
 padding:10px;
 }
#contacts{
float: left;
width:150px; 
border:1px solid #CCC;
padding:10px;
}
#copyright{
float:left;
text-align:center;
border:1px solid #333;
width:514px;
}

此外，如果所有列都具有固定的相等宽度（它们应该）遵循使用网格的设计/用户体验原则，则您不一定需要同时使用 clear。对于我的新小提琴示例，我使用了固定像素宽度。但是，如果您要创建一个流畅的布局，您可以通过计算内部宽度（不包括填充）并将其除以三来使用百分比。至于页脚，它可以以 100% 的宽度向左浮动；

要记住的另一件事是，如果您的列都具有相同的宽度和填充，则不需要为每个容器使用 ID。你可以像我上面的例子那样使用一个类。

这是我的新小提琴：http: //jsfiddle.net/krishollenbeck/Kkr83/1/ ​</p>

于 2012-09-17T17:12:48.210 回答
1

您必须使用clear: both、float:left和float:right。

这是代码：

为了HTML

<div id = "footer">
    <div id="part1">
        <div id="col1">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
        <div id="col2">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
   </div>
   <div id="part2">   
        <li>a</li>
        <li>c</li>
        <li>b</li>
   </div>
</div>

现在来了CSS

#footer {width: 1000px; }
#part1 {
    width: 500px;
    float:left;
    clear: both;
}
#part 2 {
    float:right;
    width: 500px;
}
#col1 {
    width: 200px;
    float: left;
    clear: both;
}

#col2 {
    width: 200px;
    float: right;
}
于 2012-09-17T17:19:35.613 回答
0

您应该使用样式化的无序列表，而不是 DIV 上的一堆。从语义上讲，DIV 没有任何意义。列表具有内在意义。

<ul>
    <li><a href="...">some text</a></li>
    <li><a href="...">some more text</a></li>
    <li><a href="...">more text</a></li>
</ul>

您可以为 UL 设置宽度，并将它们浮动到多列。每列一个。

于 2012-09-17T17:11:44.830 回答