0

所以我一直在这个有点诡计，我似乎无法弄清楚。我正在为我的网络开发课程做一个作业，其中一部分我需要制作两个链接列表，它们需要有一种列类型的感觉。

所以现在对于我的 HTML，我有：

<div id="linkCol1">
       <div class = "colHeading">For Standard Travelers</div>
            <ul>
                <li><a href="#">Standard seating chart</a></li>
                <li><a href="#">Find out why our flights are so unique</a></li>
                <li><a href="#">Read our insurance polic</a></li>
                <li><a href="#">Join our frequent flyer club</a></li>
                <li><a href="#">More Travel Resources...</a></li>
           </ul>
    <div id="linkCol2">
        <div class = "colHeading"> For "Others"</div>
            <ul>
                <li><a href="#">Effect of electromagnetism on travelers</a></li>
                <li><a href="#">Flying with animals</a></li>
                <li><a href="#">Non-Smoking policy</a></li>
                <li><a href="#">More Travel Resources...</a></li>
            </ul>
        </div>
    </div>

对于我的 CSS（我取出了所有我认为不起作用的东西）：

#linkCol2{
   overflow:hidden;
   float:right;
}

#linkCol1{
   float:left;
   overflow:hidden;
}

现在我的页面应该是这样的：

http://ista230.com/images/assignments/7/page1.jpg

如果您看向底部，您可以看到链接集。

任何帮助都会很棒！（CSS 3 和 HTML 5）

4

2 回答 2

1

学习时很难，但要养成看的习惯nesting，你有linkCol2里面的linkCol1。它们不能彼此正确浮动，因此在linkCol2

于 2013-11-10T05:15:24.293 回答
1

我一直采用将所有内容向左浮动并且从不使用向右浮动的方法。当您将 A 列向左浮动时，B 列仍将显示为块，除非您将 B 列也指定为向左浮动。

然后从那时起，我只需指定必要的宽度、边距、填充等，以按照我想要的方式定位所有内容。只要我在包装 div 中有列，就不会有调整大小的问题。

如果您将两个 div 都向左浮动并指定它们的高度、宽度、边距等，那么页脚不合适应该没有问题。如果页脚确实低于或高于您在两个 div 上使用 float left 时的预期值，我想这是由于 div 被放置在另一个 div 内，并且 OUTER div 需要指定高度才能推动页脚至底部。

于 2013-11-10T06:52:42.217 回答