制作响应式页脚，里面有3个div

Question

我想制作一个有三个部分的响应式页脚，因此一个div作为页脚，而不是3个相等大小的div在页脚div中连续排列。我曾经使用过1行3列的表格。但是我不知道怎么用div和css来做。

我的代码很远

<div class="push"></div>
    </div>
<div class="footer">
<div></div>
<div></div>
<div></div>
        <p>&nbsp;</p>
    </div>

感谢inadvance

Answer 1

使用％和float

HTML

<div id="footer">
  <div class="footer-section"></div>
  <div class="footer-section"></div>
  <div class="footer-section"></div>
</div>

CSS

#footer {
  width:100%; 
}
.footer-section {
  float:left;
  width:33%;
}

使用显示表 - More info

HTML

<div id="footer">
  <div class="footer-row">
    <div class="footer-section"></div>
    <div class="footer-section"></div>
    <div class="footer-section"></div>
  </div>
</div>

CSS

#footer {
  display:table;
  width:100%;
}
.footer-row {
  display:table-row;
}
.footer-section {
  display:table-cell;
}

Answer 2

您只需为所有元素添加%宽度，以便在调整视口大小时调整大小：

FIDDLE

<强> HTML

<div class="footer">
   <div class="section"></div>
   <div class="section"></div>    
   <div class="section"></div>
</div>    

CSS

.footer{
    background: black;
    width: 100%;
    height: 100px;
    padding: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.section{
    float: left;
    width: 33%;
    height: 100%;
    background: red;
}