Question

所以我一直在这里做一点诡计，我似乎无法弄明白。我正在为我的web开发类工作，对于其中的一部分，我需要制作两个链接列表，并且需要有列类型感觉。

现在，对于我的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

学习时很难，但养成查看nesting的习惯，linkCol2内有linkCol1。它们不能正确地相邻浮动，因此在linkCol2

之前添加一个结束div

Answer 2

我总是采用将所有内容浮动到左边并且从不使用浮动权利的方法。当您将列A浮动到左侧时，除非您将列B指定为向左浮动，否则列B仍将显示为块。

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

如果你向左浮动两个div并指定它们的高度，宽度，边距等，那么页脚就不会出现问题。如果页脚确实低于或高于您在两个div上使用浮动的预期，我认为这是由于div被放置在另一个div内，并且OUTER div需要指定一个高度才能推动页脚到底。

如何浮动<div> s左右</div>

2 个答案: