如何解决此布局

我一直在试图让歌手/歌曲作者的头衔漂浮在页面顶部名称的右侧。我也想要一个单独的行与img和右边的文字段。如何解决此布局

现在我遇到的问题是，我不能创建一个浮动的女孩图像的右侧，并保持文本的段落

IVE编码在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）

来源

2011-03-11 dazza_au

您正在尝试使用哪个浏览器？你真的没有文档类型？当您创建新的HTML文件时，Dreamweaver会自动插入一个，除非您明确选择“无”。 – thirtydot 2011-03-11 02:08:38

哪些浏览器（s）你看到不好的结果？ – Paul 2011-03-11 02:09:12

你可以添加它应该看起来的图像吗？ – melhosseiny 2011-03-11 02:15:27

嗨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; 
}

来源

2011-03-11 03:01:05 Dan

thnx回复，当我从工作/实习中回家时，给你一个额外的评论。然而，我们的回复非常有帮助，并立即得到了很大的回应，我会尽快执行它：P – 2011-03-11 03:49:17

不用担心@dazza_au。祝它好运。 – Dan 2011-03-11 03:54:33

如何解决此布局

回答

相关问题