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

Question

我想制作一个包含三个部分的响应式页脚，所以一个 div 作为页脚而不是页脚 div 中连续 3 个大小相等的 divs。为此，我曾经使用 1 行 3 列的 table。但我不知道如何使用 divs 和 css.

到目前为止我的代码

<div class="push"></div>
    </div>
<div class="footer">
<div></div>
<div></div>
<div></div>
        <p> </p>
    </div>

提前致谢

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

使用显示 table - 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;
}