<分区>
问题必须表现出对正在解决的问题的最低限度的理解。告诉我们您尝试过的方法、为什么不起作用以及它应该 起作用。另请参阅:Stack Overflow question checklist
关闭 9 年前。
<分区>
问题必须表现出对正在解决的问题的最低限度的理解。告诉我们您尝试过的方法、为什么不起作用以及它应该 起作用。另请参阅:Stack Overflow question checklist
关闭 9 年前。
让一张图片漂浮在左边，两个无序列表漂浮在右边。由于某种原因，列表并排 float 而不是彼此重叠。我无法让 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;
}
最佳答案
.list-2 {
float: right;
clear: right;
}
float: right 将在有足够空间的情况下将该元素放在已向右浮动的任何其他元素的左侧。要覆盖该行为并保证它低于最近的 float:right 元素，您需要使用 clear:right。
关于html - 将两个列表相互 float ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16483281/
相关文章：
javascript - 如何在一行中保持 float ul 元素
css - 我之前在 photoshop 中创建了按钮等，然后将它们保存到网络上。我现在应该使用 css 为我创建按钮吗？
javascript - 达到最大高度并且 div 像响应式 overflow-x 一样继续向右移动
javascript - 为列表项导航淡出旧图像并淡入新图像
html - 当父级使用 flex 且元素没有内容时，Flex 子级在容器上增长
javascript - 如何使用 jQuery 保存数据？
html - 为什么我的媒体屏幕查询不起作用，我不能使我的网站响应？