如何解決此佈局

我一直在試圖讓歌手/歌曲作者的頭銜漂浮在頁面頂部名稱的右側。我也想要一個單獨的行與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

如何解決此佈局

回答

相關問題