最近在网站上工作,并希望对其进行调整,以便在右边的文字后面显示图片,并提供简要说明。
<script type="text/javascript">
function gotofirst()
{
alert('This link will be replaced with the appropiate link');
window.open('http://google.com');
}
</script>
<tr>
<td>
<img src="images/poster2.jpg" onClick="gotosecond()">
</td>
<p id="forum">Join us on our forums, chat with staff members and much more!</p>
</tr>
CSS:
#forum
{
font-size: 13px;
}
然后让CSS文件右对齐。问题是图像被推下并且文本没有挤压在提供的框中,而是当我想要它在右边时右上方对齐图像。
jsFiddle链接:http://jsfiddle.net/HCVVp/
由于
答案 0 :(得分:0)
<tr>
<td>
<img src="images/poster2.jpg" onClick="gotosecond()" style="float:left;display:block">
<p id="forum" style="float:right">Join us on our forums, chat with staff members and much more!</p>
</td>
</tr>
如果它仍然不起作用,请尝试在div中包装
<tr>
<td>
<div>
<img src="images/poster2.jpg" onClick="gotosecond()" style="float:left;display:block">
<p id="forum" style="float:right">Join us on our forums, chat with staff members and much more!</p>
</div>
</td>
</tr>
答案 1 :(得分:0)
我建议你尽可能不使用元素。我想你可以这样做:
HTML
<div id="content">
<div class="left">
<img src="images/poster2.jpg" onClick="gotosecond()">
</div>
<div class="right">
<p id="forum">Join us on our forums, chat with staff members and much more!</p>
</div>
</div>
CSS:
#content{
position: relative;
width: 500px;
margin:0 auto;
}
.left{float:left;}
.right{float:right}
另一种解决方案是删除div并仅将.left
和.right
类应用于<img>
和<p>
元素。