Question

将图像浮动到左侧，两个无序列表浮动到右侧。由于某种原因，列表并排浮动而不是彼此叠加。我无法让list-2浮动在float 1下面。

有人会有任何想法吗？

<div class="container">

        <img src="yogapic1.png"/>

        <ul class="list-1">
            <li><a href="">Home</a></li>
            <li><a href="">Influences</a></li>
            <li><a href="">About Me</a></li>
            <li><a href="">Classes</a></li>
            <li><a href="">Andrews Video Blog</a></li>
            <li><a href="">Photography</a></li>
        </ul>

        <ul class-"list-2">
            <li><a href="">Find Us</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Facebook</a></li>
        </ul>


    </div><!--container-->


.container {

max-width: 1075px;
margin: auto;

}

.container img {

float: left;

}

.list-1 {
    float: right;



 }

.list-2 {
    float: right;

}

Answer 1

.list-2 {
    float: right;
    clear: right;
}

float: right，如果有足够的空间，将元素放在任何其他已浮动到右侧的元素的左侧。要覆盖该行为并确保其低于最新的float:right元素，您需要使用clear:right。

Answer 2

你在列表2上输入了一个拼写错误（-而不是=）。如果您还要将clear:right;添加到列表中，它应该执行您想要的操作：

示例：http://jsfiddle.net/nkYun/

Answer 3

将两个列表包装在一个div元素中，然后将其浮动到右侧。

通过单独浮动这两个列表，您可以将它们从文档的正常流程中取出，这样它们就不再强制元素出现在它们下面。

Answer 4

要将两个列表浮动在一起，您只需要3个步骤：

容器的位置应为相对position:relative
2个列表中的一个应该是浮动的，例如右侧float:right
第二个列表的位置应为绝对position:absolute，右侧为0px，以便从右侧开始并位于第一个列表中

Answer 5

这是另一种方法。有时试图找出应该浮动的东西，或者应该浮动的东西可能会让代码混乱。但是如果你对想要浮动的元素有一个大概的了解（也许稍后你会决定在那个部分添加更多），那么就包含父容器中的项目（在我们的例子中是一个带有css的div元素） class called lists）并将整个父级浮动到你想要的位置。这是一个例子......

CSS：

.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}

.lists {
    float: right;
    border:solid 1px pink;
}

HTML：

<div class="container">

        <img src="yogapic1.png"/>

        <div class="lists">
        <ul class="list-1">
            <li><a href="">Home</a></li>
            <li><a href="">Influences</a></li>
            <li><a href="">About Me</a></li>
            <li><a href="">Classes</a></li>
            <li><a href="">Andrews Video Blog</a></li>
            <li><a href="">Photography</a></li>
        </ul>

        <ul class-"list-2">
            <li><a href="">Find Us</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Facebook</a></li>
        </ul>
       </div>


    </div><!--container-->

my fiddle

请注意，使用这种方法，您不再会为使用浮点数排序列表而烦恼，但现在，在这个父容器中，您可以按照您想要的任何顺序简单地进入HTML代码并查找列表。成为。

享受！

Answer 6

如果你将list-2浮动到右边并清除：右边也应该有效。像：

list-2 {
      float: right;
      clear: right;
}

Answer 7

尝试为列表指定宽度：

.list-1 {
    float: right;
    width:100%;
}
.list-2 {
    float: right;
    width:100%;
}

修改

如果您为两个列表提供相同的CSS，请尝试使用此类

.container ul{ float:left; width:100%; }

将两个列表浮动在一起？

7 个答案: