Question

我的页脚有背景，但我不能让它有一个坚实的黑色矩形。黑色只围绕我的文字，而不是我的包装div和我的页脚。

.footer {
  color: #FFF;
  background-color: #000;
}

.DIV37n5 {
  float: left;
  width: 37.5%;
}

<footer class="footer">
  <div class="Wrapper">
    <div class="DIV12n5">
      <table width="20%" border="1" class="InfoTbl">
        <tr>
          <th scope="col">Public Sources of Info</th>
        </tr>
        <tr>
          <td><a href="https://wikileaks.org/">WikiLeaks</a></td>
        </tr>
        <tr>
          <td><a href="https://kongregate.com/">And if ya get 
                bored</a>
          </td>
        </tr>
      </table>
    </div>
    <div class="DIV50">
      <p class="PromiseTxt" align="right">This organization is a nonprofit organization dedicated to the spread of knowledge. Remember to always double-check your sources because even we
        <strong>aren't</strong> perfect!
      </p>
    </div>
    <div class="DIV37n5">
      <p class="PromiseTxt" align="center"> Updated about 1 minute ago
      </p>
    </div>
  </div>
</footer>

那些.DIV类都是一样的，浮点数：左边和宽度取决于所说的数字。

Answer 1

因为你有一个浮动，清除它

<强> DEMO HERE

<强> HTML

<footer class="footer">
  <div class="Wrapper">
    <div class="DIV12n5">
      <table width="20%" border="1" class="InfoTbl">
        <tr>
          <th scope="col">Public Sources of Info</th>
        </tr>
        <tr>
          <td><a href="https://wikileaks.org/">WikiLeaks</a></td>
        </tr>
        <tr>
          <td><a href="https://kongregate.com/">And if ya get 
            bored</a>
          </td>
        </tr>
      </table>
    </div>
    <div class="DIV50">
      <p class="PromiseTxt" align="right">This organization is a nonprofit organization dedicated to the spread of knowledge. Remember to always double-check your sources because even we
        <strong>aren't</strong> perfect!
      </p>
    </div>
    <div class="DIV37n5">
      <p class="PromiseTxt" align="center"> Updated about 1 minute ago
      </p>
    </div>

    <div style="clear:both;"></div>
  </div>
</footer>

我怎样才能得到一个横幅般的页脚？

1 个答案: