浮动两个列表彼此之上？

-1

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

}

来源

2013-05-10 seanki

你在名单2上有一个错字（-而不是=）。如果您还添加clear:right;的名单应该做你想要什么：

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

来源

2013-05-10 13:24:39 Maloric

完美的谢谢你！上帝该死的错字！ – seanki 2013-05-10 13:30:24

发生在我们身上;） – Maloric 2013-05-10 13:33:19

<-----打勾，我需要我的修复 – Maloric 2013-05-10 13:35:04

-1

如果您将list-2浮动到右侧并且clear：right也应该起作用。像：

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

来源

2013-05-10 13:23:05 falky

裹在一个div元素的两个列表和浮空，而不是正确的。

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

来源

2013-05-10 13:23:56 ChrisPatrick

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

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

来源

2013-05-10 13:24:38 Gareth

-1

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

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

编辑

如果您正在给这两个列表相同的CSS，尝试这样的事情

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

来源

2013-05-10 13:24:52

漂浮在彼此你简单需要3步骤的顶两个列表：

容器应当具有的位置相对position:relative
其中2所列出的应该是浮动例如向右float:right
第二个列表应该有绝对位置position:absolute和它的右边是0像素，使其从右边开始，并成为第一个列表

来源

2013-05-10 13:40:53

这里是一个上替代方法。有时候试图找出应该浮动的东西，或者应该浮动的东西可能会让代码混淆。但是如果你对你想要浮动的元素有一个大致的了解（也许稍后你会决定增加更多的内容），然后在父容器中包含项目（在我们的例子中是一个带有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-->

而且my fiddle

注意过这种方法，你不再离开花车订购您列出的头痛，但现在，在这个父容器中，您可以简单地进入您的HTML代码并按照您希望的顺序排列列表。

享受！

来源

2013-05-10 13:48:32 blackhawk

浮动两个列表彼此之上？

回答

相关问题