html - 如何左右浮动

Question

所以我在这方面已经有一段时间了，但我似乎无法弄清楚。我正在为我的网络开发类(class)做作业，其中一部分我需要制作两个链接列表，并且它们需要有一种列类型的感觉。

所以现在对于我的 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)

Answer 1

学习的时候很难，但是养成看嵌套的习惯，linkCol1里面有linkCol2。它们不能正确地彼此相邻 float ，因此在 linkCol2

之前添加一个结束 div