0

我在 div 中有一个使用来自 twitter bootstrap 的 span12 类的表，该表包含在一个行类 div 中，所有这些都被页脚标记包围，如下所示：

<footer class="footer">
        <div class="row">
          <div class="span12">
            <table>
              <tr>
                <td> <!-- Contact Us -->
                  <table>
                    <tr>
                      <td><b>Contact Us</b></td>
                    </tr>
                     <tr>
                      <td>Tel: 01234 567897</td>
                    </tr>
                     <tr>
                      <td>E-mail: info@email.com</td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Useful Links -->
                  <table>
                    <tr>
                      <td><b>Useful Links</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Contact Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">About Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Copyright Information</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Terms & Conditions</a></td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Social -->
                  <table>
                    <tr>
                      <td><b>Connect With Us</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Facebook</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Twitter</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Google Plus</a></td>
                    </tr>
                   </table>
                </td>
              </tr>
            </table>
         </div>
        </div>
      </footer>

我应用了以下 CSS：

/* Table Style */

    .footer table {
        table-layout:fixed;
        margin-right: auto;
        margin-left: auto;
        width: 100%
    }

    .footer td b {
        vertical-align:top;
        color: #ccc2a0;
    }

    .footer td {
        vertical-align:top;
        color: #a8a8a8;
    }

我试图让页脚左侧和第一个表格数据之间的空间与页脚右侧和最后一个表格数据之间的空间相同，但是它在右侧总是有更大的差距。

任何人都可以看到我使用的 CSS 有问题吗？

谢谢

编辑：这是尝试使用 div 实现此目的的代码：

<footer class="footer">
    <div class="row" style="background-color:red;">
      <div class="span12" style="background-color:orange;">
        <div class="span4" id="leftFooter">

        </div>
        <div class="span4" id="middleFooter">

        </div>
        <div class="span4" id="rightFooter">

        </div>
      </div>
    </div>
  </footer>

CSS 只是简单地给盒子上色，这样我就可以看到发生了什么，并为 div 增加了一些高度。div布局问题

灰色框是页脚 div，红色框是行，橙色框是 span12。其余的是 span4 的 3 个内容 div。不知道为什么他们不留在同一行。

4

2 回答 2

1

我改变了一些并去掉了所有的样式（对不起），但你的间距应该水平固定。您可以应用任何其他您想要的样式。另外，我去掉了所有嵌入的表格，因为它太麻烦了……如果你愿意，我可以调整垂直间距，但我只是把它放在一起给你一个水平间距的想法。

http://jsfiddle.net/YYZwY/1/

HTML：

<footer class="footer">
  <table>
    <td>
                <div id="ContactUS" class="information">Contact Us</div>
                <div id="Telephone" class="information">Tel: 01234 567897 </div>
                <div id="email" class="information">Email: info@email.com</div>
    </td>
    <td>
                 <div class="links">Useful Links</div>
                 <div class="links"><a href="#">Contact Us</a></div>
                 <div class="links"><a href="#">About Us</a></div>
                 <div class="links"><a href="#">Copyright Information</a></div>
                 <div class="links"><a href="#">Terms & Conditions</a></div>
    </td>
    <td>
                 <div class="connect"><b>Connect With Us</b></div>
                 <div class="connect"><a href="#">Facebook</a></div>
                 <div class="connect"><a href="#">Twitter</a></div>
                 <div class="connect"><a href="#">Google Plus</a></div>
    </td>
</footer>

CSS：

.links {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.connect {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.information {
    padding-right: 10px;
}
于 2013-07-16T23:54:22.103 回答
0

CSS：

.span12 {
  text-align: center;
}

如果我们不介意文本对齐，则此解决方案有效。

结果 [CodePen]：http ://codepen.io/loxaxs/pen/kilLG

一个不同的解决方案：

CSS：

.span12 {
  padding-left: 15%;
}

结果 [CodePen]：http ://codepen.io/loxaxs/pen/izIHq

于 2013-07-16T23:38:12.950 回答