0

让一个图像向左浮动，两个无序列表向右浮动。由于某种原因，这些列表并排浮动，而不是彼此重叠。我无法让 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;

}
4

7 回答 7

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

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

于 2013-05-10T13:24:38.173 回答
1

您在列表 2 上有一个错字（-而不是=）。如果您还添加clear:right;到列表中，它应该做您想做的事情：

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

于 2013-05-10T13:24:39.657 回答
0

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

通过单独浮动这两个列表，您将它们从文档的正常流程中移除，因此它们不再强制元素出现在它们下方。

于 2013-05-10T13:23:56.153 回答
0

要将两个列表浮动在彼此之上，您只需 3 个步骤：

  1. 容器的位置应该是相对的position:relative
  2. 2 个列表之一应该是浮动的，例如向右float:right
  3. 第二个列表应该有绝对位置position:absolute并且它的右边是 0px 以便它从右边开始并在第一个列表上
于 2013-05-10T13:40:53.137 回答
0

这是另一种方法。有时试图弄清楚什么应该向左浮动，或者什么应该向右浮动可能会在代码中造成混淆。但是，如果您对要浮动的元素有一个大致的了解，（也许稍后您会决定在该部分添加更多内容），然后将项目包含在父容器中（在我们的例子中是一个带有 css 的 div 元素名为列表的类）并将整个父级浮动到您想要的位置。这是一个例子......

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-->

还有我的小提琴

也请注意，使用这种方法，您不再为使用浮动排序列表而烦恼，但是现在，在这个父容器中，您可以简单地进入您的 HTML 代码并按照您希望的任何顺序排列列表。

享受！

于 2013-05-10T13:48:32.220 回答
-1

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

list-2 {
      float: right;
      clear: right;
}
于 2013-05-10T13:23:05.560 回答
-1

尝试为您的列表分配宽度：

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

编辑

如果您为两个列表提供相同的 CSS，请尝试这样的操作

.container ul{
    float:left;
    width:100%;
}
于 2013-05-10T13:24:52.043 回答