無法將圖像浮動到文本右側？

-2

我想讓圖像浮在文本旁邊，我無法讓它工作。我希望文本和圖片都能在導航和徽標下方顯示。無法將圖像浮動到文本右側？

這裏是HTML 傑克·瓊斯新媒體設計

 <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 

    <div class="wrapper"> 

    <div id="logo"><img src="logo.jpg" alt="Art"></div> 

<ul id="Menu"> 

    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Portfolio</a> 
     <ul> 
     <li><a href="#">Web</a></li> 
     <li><a href="#">Campeign</a></li> 
     <li><a href="#">Print</a></li> 
     <li><a href="#">Motion</a></li> 
     <li><a href="#">Photography</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
</ul> 


    <div class="text"> 

      <p> The surfboard, one of the most fun toys around. There is just one problem with it. The majority of them are plain white. There is no color and adding some stickers isn't a true way to express yourself! With a little time and some common items from your garage or hardware, you can make it so much better. You don't have to be a great artist or have lots of money to truly make that board your own. This site is a simple guide with some tips and tricks for painting your surfboard. When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! Here are some art ideas. <a href="http://jsindustries.com/sprays" target="blank">Art Ideas</a> </p> 



<div class="imgContainer"> 
     <img src="me.jpg" alt="Art" title="me"> 
    </div> 

</div> 
</div> 
</body>

這裏是CSS

.wrapper { 
    margin:auto; 
    width:1000px;  
} 

#logo { 
    float: left; 
    margin-left: 10px; 
} 

#Menu, 
#Menu ul { 
    list-style: none; 
    } 

#Menu { 
    float: right; 
    margin-right: 20px; 
    margin-top: 85px; 
    } 

#Menu > li { 
float: left; 
} 
#Menu li a { 
display: block; 
height: 2em; 
line-height: 2em; 
padding: 0 1.5em; 
text-decoration: none; 
} 

#Menu ul { 
position: absolute; 
display: none; 
z-index: 999; 
} 

    #Menu ul li a { 
    width: 50px; 
} 

#Menu li:hover ul { 
display: block; 
    } 

    /* Main menu 
------------------------------------------*/ 
#Menu { 
font-family: Arial; 
font-size: 12px; 
background: #ffffff; 
    } 

    #Menu > li > a { 
    color: #000000; 
    font-weight: bold; 
    } 

#Menu > li:hover > a { 
background: #ffffff; 
color: #7a0808; 
} 

/* Submenu 
------------------------------------------*/ 
    #Menu ul { 
    background: #ffffff; 
    padding: 0; 
    list-style-type: none; 
    } 

    #Menu ul li a { 
    color: #000000; 
    } 

    #Menu ul li:hover a { 
    color: #7a0808; 
    } 

    /* Content 
    ------------------------------------------*/ 
.text { 
    clear: both; 
} 

p { 

    clear: both; 
    width: 200px; 
} 


.imgContainer { 
margin-top: 70px; 
margin-right: 40px; 
float:right; 
clear: both; 
}

來源

2014-11-06 Jake Jones

你需要把圖像段前。

<div class="text"> 

    <div class="imgContainer"> 
     <img src="me.jpg" alt="Art" title="me"> 
    </div> 

    <p> The surfboard, one of the most fun toys around. There is just one problem with it. The majority of them are plain white. There is no color and adding some stickers isn't a true way to express yourself! With a little time and some common items from your garage or hardware, you can make it so much better. You don't have to be a great artist or have lots of money to truly make that board your own. This site is a simple guide with some tips and tricks for painting your surfboard. When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! Here are some art ideas. <a href="http://jsindustries.com/sprays" target="blank">Art Ideas</a> </p> 

</div>

來源

2014-11-06 18:22:33

非常感謝！爲學校建立投資組合。仍然在非常粗糙的開始！ – 2014-11-06 18:25:51

@JakeJones歡迎來到堆棧溢出和Web開發:)隨意標記我的答案被接受，如果它有幫助。 – 2014-11-06 19:31:18

無法將圖像浮動到文本右側？

回答

相關問題