Question

我的网页中有一个页脚，它使用twitter bootstraps span4类来嵌套3个div。我希望“与我们联系”的距离与右侧相同，因为“联系我们”标题位于左侧，“有用链接”位于中间，每个div的所有文本都在左下方对齐。

这是我到目前为止所做的： current

您可以看到“联系我们”距离右边缘比“与我们连接”更靠近左边缘。

我尝试使用文本对齐标题，但下面的列表项不会与元素保持对齐。

这是一个图像，显示标题上的文本对齐方式。您可以看到它们按照我的要求布局，但它们下面的内容并未与它们保持一致： with text-align

以下是页脚的HTML：

<footer class="footer">
        <div class="row-fluid">
          <div class="span12">
            <div class="span4" id="leftFooter">
              <h5><b>Contact Us</b></h5>
               <ul>
                <li><a href="#">Tel: 01234 567897</a></li>
                <li><a href="#">E-mail: info@oom.com</a></li>
              </ul>
            </div>
            <div class="span4" id="middleFooter">
              <div class="middle"><h5><b>Useful Links</b></h5>
              <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Copyright Information</a></li>
                <li><a href="#">Terms & Conditions</a></li>
              </ul> </div>
            </div>
            <div class="span4" id="rightFooter">
               <h5><b>Connect With Us</b></h5>
              <ul>
                <li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li>

                <li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li>

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

这是页脚的CSS：

    .footer {
      padding: 10px;
      position: relative;
      color: #ccc2a0;
      background-color: #333333;
      height: 150px;
      clear:both;
      padding-top:20px;
    } 

    .footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #leftFooter {
        color: #ccc2a0;
        padding-left: 50px;
    }

    #middleFooter {
        color: #ccc2a0;
        /* text-align: center; */
    }

    #rightFooter {
        padding-right: 50px;
        /*text-align: right; */
        color: #ccc2a0;
    }

    #rightFooter li {
        padding-top: 5px;
    }
.follow { line-height: 19px; }

有人可以帮忙吗？感谢

编辑：以下是我对右侧页脚所做的更改：

<div class="span4" id="rightFooter">
               <div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
              <ul>
                <div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li> </div>

                <div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li> </div>
              </ul>
            </div>

CSS：

.trow {
    display: table-row;
    background-color: green;
    margin-right: 0;
}

.tcell {
    display: table-cell;
    background-color: green;
}   

.trow h5 {
    display: table-row;
    background-color: yellow;
}

以下是行和单元格的颜色： enter image description here

Answer 1

您可以使用display: table-cell使块表现为表格单元格，可以进一步设置样式以使它们具有相同的宽度。

您也可以浮动块或使用display: inline-block并为每个块提供宽度的三分之一，但是当缩放时，您可能会得到舍入错误，这可能导致最后一个块跳转到下一行。当块的行为类似于table-cells时，您就没有这个问题。

Answer 2

我重命名了一些CSS ID并删除了HTML中的一些标记，例如b标记（不确定为什么要使用它）。您的＆符号&应为&。

添加了几个DIV .outer和.inner，它们将第二个.span4的内容居中，但保持左对齐。 float: left;上.outer的主要内容是将.outer的宽度设置为其内容。您也可以使用display: inline-block;代替float: left;。 .outer向左移动50％的容器，然后.inner向右移动50％的容器（.outer）。最后它最终位于.span4的中心。

对于第三个.span4，我们添加了一个带有.pull-right类的DIV，它来自你的Twitter Bootstrap，它将东西向右浮动。这会将所有内容设置到第三个.span4的右侧，而无需重新对齐文本。

.footer {
     padding: 10px;
     position: relative;
     color: #ccc2a0;
     background-color: #333333;
     height: 150px;
     clear:both;
     padding-top:20px;
} 

.footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
#contact-us {
     padding-left: 50px;
}
.outer {
     position: relative;
     left: 50%;
     float: left;
}
.inner {
     position: relative;
     right: 50%;
}
#connect-with-us {
     padding-right: 50px;
}
#connect-with-us li {
     padding-top: 5px;
}
#connect-with-us a {
     padding-left: 5px;
}
.follow {
     line-height: 19px;
}

<footer class="footer">
     <div class="row-fluid">
          <div class="span12">
               <div id="contact-us" class="span4">
                    <h5>Contact Us</h5>
                    <ul>
                         <li><a href="#">Tel: 01234 567897</a></li>
                         <li><a href="#">E-mail: info@oom.com</a></li>
                    </ul>
               </div>
               <div class="span4">
                    <div class="outer">
                         <div class="inner">
                              <h5>Useful Links</h5>
                              <ul>
                                   <li><a href="#">Contact Us</a></li>
                                   <li><a href="#">About Us</a></li>
                                   <li><a href="#">Copyright Information</a></li>
                                   <li><a href="#">Terms &amp; Conditions</a></li>
                              </ul>
                         </div>
                    </div>
               </div>
               <div id="connect-with-us" class="span4">
                    <div class="pull-right">
                         <h5>Connect With Us</h5>
                         <ul>
                              <li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow">Facebook</a></li>
                              <li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow">Twitter</a></li>
                         </ul>
                    </div>
               </div>
          </div>
     </div>
</footer>

在页脚中均匀分配div

2 个答案: