如何在图像的右侧放置div?

时间:2012-08-04 10:46:26

标签: html css

我在页面中央有图像。

我想在<div class='contain'>显示文本块float left对图片10px。图片与<div class='contain'>之间的<div class='contain'>

我不想移动图像,我想图像将保留在中心,而右侧则放置clear:both;

我将属性<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1> <div id="container"> <div id="all_pages"> <div class="page"> <h1>Home Page</h1> <img src="images/yellow_flowers.jpg" width="300px" height="300px"> <div class='contain'>this is the home page bla bla bla</div> </div> <!-- page1 --> <div class="page"> <h1>About Us Page</h1> <img src="images/Pink_Flowers.jpg" width="300" height="300px"> </div> <!-- page2 --> <div class="page"> <h1>Contact Us Page</h1> <img src="images/green_flowers.jpg" width="300" height="300px"> </div> <!-- page2 --> </div> <!-- #all_pages --> </div> <!-- #container --> <div id="menu"> <ul> <li id="1" class="link CC3366 active">Home</li> <li id="2" class="link 33FF66">About</li> <li id="3" class="link FFFF33">Contact Us</li> </ul> </div> <!-- #menu --> <div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div> ​ body { background: #CC3366 url(images/temp.png) center 130px no-repeat ; overflow:hidden; margin:0; padding:0; } #container { width: 1000px; overflow: hidden; position: relative; height: 450px; margin: 0 auto; } #all_pages { position: absolute; left: 0; top: 0; width: 3000px; } .page { width: 1000px; height: 400px; float: left; text-align: center; margin-top: 10px; } .page img { margin-top: 10px; } #menu { background: #000; } #menu ul { list-style: none; width: 457px; height: 35px; margin:auto; } #menu ul li { float: left; color: #FFFF33; width: 150px; line-height: 35px; text-align: center; cursor: pointer; } .active { color: #fff !important; } #footer a{ font-size: 25px; font-weight: bold; } #footer{ line-height: 100px; background: #CC3366; width:100%; height:1000px; text-align: center; display: block; } #toptitle { position: absolute; width:100px; top: 30px; left: 30px; color: #000; cursor: pointer; z-index:20; } a { text-decoration: none; } #contain{ clear:both; float:left; margin-left:10px; background: blue; width:300px; height:300px; } .clear{ }​ $(".link").click(function(){ var page = $(this).attr("id"); var color = $(this).attr("class"); color = color.substr(5,6); $('#all_pages').animate({left: (page-1)*(-1000) }); $("body").animate({backgroundColor: '#'+color}); $("#menu ul li").removeClass('active'); $(this).addClass('active'); }); 添加到图片或div中,我认为我不知道如何使用它。

jsfiddle Demo

我该怎么做? THX

我的代码:

{{1}}

1 个答案:

答案 0 :(得分:0)

我使用表来完成这项工作,似乎工作正常。

<center>
 <table>
  <tr>
   <td valign=top align=right width=50%>Here is the text</td>
   <td width=300px><img src='fun.jpg' width=300px height=300px></img></td>
   <td width=50%></td>
  </tr>
 </table>
</center>