在html5 css3中創建一個類似於頁腳的多列

Question

我需要創建一個包含三列的頁腳。 下面的代碼給出了第二張圖片，而不是第一張圖片；

<footer>
    <div id=”footer_links”> </div>
    <div id=”values”>.....</div>
    <div id=”contacts”>.....</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正確對齊而不是像第二個示例那樣偏移？

Answer 1

您可以使用CSS3 Multicolumns 。

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

請參閱鏈接以獲取預覽和文檔。

Answer 2

這是與您想要的結構類似的結構。雖然仍然不確定所要查找的內容。 還是真正的問題是..

的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/

根據您的編輯進行更新：

我要做的第一件事是更改您的填充。 然后我要嘗試的第二件事是使列向左浮動...例如...

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;
}

同樣，如果所有列都具有相等的固定寬度（應采用固定寬度）以遵循使用網格的設計/ UX原理，則不必同時使用clear。 在我的新小提琴示例中，我使用了固定的像素寬度。 但是，如果要創建流暢的布局，則可以通過計算內部寬度（不包括填充）並將其除以三來使用百分比。 至於頁腳，它可以以100％的寬度向左浮動；

要記住的另一件事是，如果列的寬度和填充都相等，則不需要為每個容器使用ID。 您可以像上面的示例一樣使用一個類。

這是我的新朋友： http : //jsfiddle.net/krishollenbeck/Kkr83/1/

Answer 3

您必須同時使用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;
}

Answer 4

您應該使用樣式化的無序列表，而不是一堆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設置寬度，然后將其浮動為多列。 每列一個。