我在页面中央有图像。
我想在 <div class='contain'> 中显示文本 block 这将是 float left到图像。 10px图片到<div class='contain'>之间.
我不想移动图像，我希望图像保持在中间，而在右侧我放了 <div class='contain'> .
我添加属性 clear:both;图像或 div，我认为我不知道如何使用它。
我该怎么做？ 谢谢
我的代码:
<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');
});
最佳答案
我使用表格来完成这项工作，看起来效果不错。
<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>
关于html - 如何将div定位在图像的右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11808002/