将wordpress页面分为五列

Question

我正在尝试创建wordpress页脚。我需要将页面分为五列，我使用了两个URL作为示例。我编写的代码如下：

    .footer-titlesb {
      color: #393939;
      font-size: 18px;
      text-align: left;
      line-height: 2.3;
      font-weight: 700;
    }
    .lefttextb {
      text-align: left;
      font-size: 13px;
      color: #393939;
      !important;
      line-height: 1.8;
      font-weight: 400;
      list-style-type: none;
    }
    .lefttextb a {
      color: #393939;
    }
    .lefttextb a:hover {
      color: #393939;
      padding-bottom: 2px;
      border-bottom: 1px dashed #393939;
    }

<div style="width: 20%; padding: 0 10px 0 0; float: left;">
  <div class="footer-titlesb">Our Community</div>
  <div class="lefttextb"><a href="http://domain.com/forums/">Forums</a>
    <br />
    <a href="http://domain.com/community">Community</a> 
    <br />Report a Problem
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left;">
  <div class="footer-titlesb">Company</div>
  <div class="lefttextb">About Us
    <br />Privacy Policy
    <br />Terms
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left;">
  <div class="footer-titlesb">Resources</div>
  <div class="lefttextb">Scores
    <br />Tips
    <br />Examination
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left;">
  <div class="footer-titlesb">Follow Us</div>
  <div class="lefttextb">Facebook
    <br />Twitter
    <br />Google Plus
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: right;">
  <div class="footer-titlesb">Connect</div>
  <div class="lefttextb">Contact Us
    <br />Feedback
    <br />Send us
    <br />
  </div>
</div>
<div style="”clear: both;"></div>

我不确定为什么列不在一行中。如果你纠正我，我会很高兴，因为我担心浮子有问题（即：左，右等等），或者可能是我使用不同的宽度。

Answer 1

您可以使用box-sizing property更改用于计算元素宽度的默认CSS框模型。目前，每个div上的填充导致每个div的有效宽度为10px + 20%。

您可以将box-sizing更改为border-box以解决此问题：

＆＃13;

＆＃13;

    .footer-titlesb {
      color: #393939;
      font-size: 18px;
      text-align: left;
      line-height: 2.3;
      font-weight: 700;
    }
    .lefttextb {
      text-align: left;
      font-size: 13px;
      color: #393939;
      !important;
      line-height: 1.8;
      font-weight: 400;
      list-style-type: none;
    }
    .lefttextb a {
      color: #393939;
    }
    .lefttextb a:hover {
      color: #393939;
      padding-bottom: 2px;
      border-bottom: 1px dashed #393939;
    }

＆＃13;

<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;">
  <div class="footer-titlesb">Our Community</div>
  <div class="lefttextb"><a href="http://domain.com/forums/">Forums</a>
    <br />
    <a href="http://domain.com/community">Community</a> 
    <br />Report a Problem
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;">
  <div class="footer-titlesb">Company</div>
  <div class="lefttextb">About Us
    <br />Privacy Policy
    <br />Terms
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;">
  <div class="footer-titlesb">Resources</div>
  <div class="lefttextb">Scores
    <br />Tips
    <br />Examination
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;">
  <div class="footer-titlesb">Follow Us</div>
  <div class="lefttextb">Facebook
    <br />Twitter
    <br />Google Plus
    <br />
  </div>
</div>
<div style="width: 20%; padding: 0 10px 0 0; float: right; box-sizing: border-box;">
  <div class="footer-titlesb">Connect</div>
  <div class="lefttextb">Contact Us
    <br />Feedback
    <br />Send us
    <br />
  </div>
</div>
<div style="clear: both;"></div>

＆＃13;

＆＃13;

＆＃13;