我一直试图让歌手/词曲作者的名字浮动到页面顶部名称的右侧。我还想要一个带有img的单独行和右边的文本段。
我现在遇到的问题是我无法创建一个漂浮在女孩形象右侧的黑色导航菜单，并保持在文本段落之下
我在Dreamweaver中编写了以下代码，这是排除导航菜单。当我在Dreamweaver中查看文档时，它都能正确显示。但是当我在浏览器中打开它时显示的很奇怪，文字段落显示在大图像下面。
有人可以提供帮助，说明为什么会这样，一旦修复它，我将如何直接在文本段落下添加导航菜单，欢呼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:left;}
.alice{float:left;}
.info{float:left;}
</style>
</head>
<body>
<div class="wrapper">
<div id="top">
Content for id "top" Goes Here
</div>
<div class="logo">
<img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" />
</div>
<div class="title">
<h2>Singer/Songwriter</h2>
</div>
<div style="clear:both;">
</div>
<div class="alice">
<img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" />
</div>
<div class="info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit. <br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo. <br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti.
</p>
</div>
<!-- end info -->
<div style="clear:both;">
</div>
<div id="footer">
Content for id "footer" Goes Here
</div>
</div>
<!-- end wrapper -->
</body>
</html>
（编辑：See this fiddle）
答案 0 :(得分：1)
您好 dazza_au ，
非常粗略的修复，但会完成这项工作：http://jsfiddle.net/MedDj/4/
基本上，如果您希望它们彼此相邻浮动，则需要在浮动元素中添加 width 。
查看上面的实例，如果您需要进一步说明，请告诉我？
此致 的丹
以下是您需要的代码：
<强> HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="top">Content for id "top" Goes Here</div>
<div class="wrapper">
<div class="logo"><img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" /></div>
<div class="title"><h2>Singer/Songwriter</h2></div>
<div style="clear:both;"></div>
<div class="alice"><img src="http://digitalgenesis.com.au/sites/alice/img/alice.png" /></div>
<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa est, ultrices quis volutpat vitae, volutpat id mauris. In lacinia, nisi sit amet tincidunt rhoncus, nunc augue pharetra neque, eget sagittis orci justo tincidunt lectus. Phasellus sollicitudin lacus sed nisl eleifend bibendum. Vivamus imperdiet porttitor facilisis. Pellentesque quis metus risus, ac sagittis augue. Vivamus vehicula lacus ullamcorper sapien tincidunt congue. Vivamus diam tellus, faucibus sit amet rutrum ut, mattis eu orci. Fusce ullamcorper, odio et ultricies posuere, lorem orci faucibus orci, vel vehicula mauris arcu vitae metus. Cras congue nulla id quam elementum porttitor. Praesent dapibus odio nec nisl pretium quis pharetra leo suscipit.
<br /><br />
Phasellus vestibulum magna ut tortor sagittis ut pretium tellus feugiat. Integer ullamcorper enim vitae odio ultricies tempor. Donec ullamcorper erat tincidunt tortor laoreet ultricies. Nullam volutpat sollicitudin est, et hendrerit metus aliquam in. Nunc convallis tempus velit, a interdum ipsum ultricies eu. Integer ultrices mollis molestie. Donec augue sem, lacinia quis tempor id, rutrum quis sapien. Nullam sit amet velit vitae justo tempus fermentum sit amet et sapien. Ut pretium metus odio, a tempus nisi. Ut fringilla semper justo.
<br /><br />
Aliquam pellentesque libero sit amet nisi feugiat sagittis. Integer in purus magna. Suspendisse at ipsum id ante fringilla vehicula id eget nibh. Morbi consequat ligula quis mauris sagittis egestas. Maecenas quam odio, posuere nec venenatis non, posuere ut elit. Nulla tincidunt tristique tellus in commodo. Donec aliquet libero et enim porta vel auctor ipsum aliquet. Aenean eget nisl non quam auctor malesuada vitae id felis. In scelerisque massa eu turpis fringilla congue. Cras odio sem, aliquam et blandit nec, semper ut turpis. Curabitur bibendum, magna sed rhoncus placerat, justo quam scelerisque sem, et varius massa nisi ac ligula. In pharetra tincidunt odio, sodales mollis sem congue non. Integer ullamcorper nibh augue, sit amet semper eros. Nunc malesuada odio vel nisi venenatis quis dictum nisi lacinia. Sed imperdiet dapibus sem, a suscipit justo fringilla at. Fusce quis lacus a diam porttitor auctor. Suspendisse potenti. </p>
<ul class="nav">
<li><a href="#">Nav button one</a></li>
<li><a href="#">Nav button two</a></li>
</ul>
</div><!-- end info -->
<div style="clear:both;"></div>
</div><!-- end wrapper -->
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>
<强> CSS
.wrapper{min-width:800px;width:800px;}
body{margin:0px; padding:0px;}
#footer{ background:black; height:100px;}
#top{height:50px; background:black; }
.logo{float:left;}
.title{float:right;padding:40px 10px 0 0; font-size:130%;}
.alice{float:left;width:400px; overflow:hidden;}
.info{float:left;width:400px;}
.info ul.nav{
list-style:none;
padding:0;
margin:10px 0;
overflow:hidden;
}
.info ul.nav li{
float:left;
padding-right:10px;
}
.info ul.nav li a{
background-color:#000;
color:#fff;
padding:10px;
text-decoration:none;
display:block;
}